Div는 래퍼에 들어 가지 않습니까?

div와 약간의 문제가 있습니다. 내 웹 사이트에는 height: 100%; 크기의 래퍼가 하나 있습니다.이 래퍼에는 헤더, 슬라이더 및 콘텐츠 div와 같은 다양한 div가 포함되어 있습니다. 유일한 문제는 안좋은 이유 때문에 contentt div가 래퍼 div에서 푸시당하는 것입니다.Div는 래퍼에 들어 가지 않습니까?

나를 도울 수있는 사람은 누구입니까?

html { 
    overflow-y:       scroll; 
    height:        100%; 
    position:       relative; 
} 

a { 
    outline:       none; 
} 

img { 
    width:        100%; 
    border:        none; 
    -moz-border-radius:     20px; 
    border-radius:      20px; 
} 

body { 
    width:        100%; 
    height:        100%; 
    background-color:     yellow; 
    margin:        0px 0px 0px 0px; 
} 

.wrapper { 
    width:        87%; 
    height:        100%; 
    background-color:     red; 
    margin:        0 auto; 
} 

.header { 
    width:        100%; 
    height:        150px; 
    background-color:     green; 
    float:        left; 
    overflow:       hidden; 
} 

.logo { 
    width:        7%; 
    height:        114px; 
    margin:        18px 0% 18px 3%; 
    float:        left; 
    background-image:     url("..//img/logo.png"); 
    background-size:     100%; 
    background-repeat:     no-repeat; 
} 

.slogan { 
    width:        30%; 
    height:        100px; 
    background:       orange; 
    margin:        25px 13% 25px 13%; 
    float:        left; 
} 

.nav { 
    width:        31%; 
    height:        150px; 
    background-color:     purple; 
    float:        left; 
    margin:        0% 3% 0% 0%; 
} 

.search { 
    width:        100%; 
    height:        50%; 
    background:       blue; 
    float:        left; 
} 

.menu { 
    width:        100%; 
    height:        50%; 
    float:        left; 
    background:       grey; 
} 

.slider-container { 
    width:        100%; 
    height:        100%; 
    background-color:     white; 
} 

.main-content { 
    width:        100%; 
    height:        100px; 
    background-color:     pink; 
    float:        left; 
} 

.column { 
    width:        31%; 
    height:        auto; 
    background-color:     orange; 
    float:        left 
} 

/* SLIDER */ 

.caption { 
    width:        500px; 
    background-image:     url("..//img/caption-bg.png"); 
    background-size:     100%; 
    position:       absolute; 
    z-index:       99; 
    overflow:       hidden; 
    margin-top:       7%; 
    margin-left:      5%; 
    -moz-border-radius:     20px; 
    border-radius:      20px; 
} 

.caption-text { 
    max-width:       460px; 
    overflow:       hidden; 
    margin:        20px; 
} 

.wrapper .slider-container #slideshow { 
    float:        left; 
    position:       relative; 
    width:        100%; 
} 

.wrapper .slider-container #slideshow > div { 
    position:       absolute; 
}

당신은 누군가가 나를 도울 수 http://k2stuc.nl/test/

희망에서 라이브 데모를 볼 수 있습니다!

감사합니다.

출처

2013-03-15 Quincy Norbert

-1

나는 문제가 <body>에 height: 100% 설정 슬라이더 사업부가 가지고있는 사실 height:100%

출처

2013-03-15 12:34:29

슬라이더 div의 높이를 변경할 수 있습니까? 그래도 여전히 동적입니다. –

찾고있는 내용을 이해하지 못합니다. 슬라이더 컨테이너를 내용에 맞게 조정하려면 슬라이더의 슬라이드가 'position : absolute'에 있기 때문에 고정 된 높이가 필요합니다. –

에서 오는 뷰포트의 100 % 높이를 설정 생각합니다.

이제 뷰포트는 브라우저 창의 inner-height만큼 높습니다. 그리고 브라우저 자체의 크기를 변경하면 그 점이 바뀝니다.

<body>의 직계 하위는 height: 100%으로 설정되고 뷰포트의 높이를 상속합니다.

'시차'웹 사이트가 많은 역할을하는 부분입니다.

희망적입니다.

출처

2013-03-15 12:38:10 Labu

내용의 의미가 무엇인지 이해하고 있다고 생각합니다. 콘텐츠 div를 배치 할 수있는 방법이 있습니까? 래퍼 div에? –

달성하고자하는 목표는 무엇입니까? – Labu

나는 꼬리말을 제외한 모든 내용을 포함하도록 래퍼 div를 원한다. 바닥 글은 머리글, 슬라이더 및 내용에 대해 100 %의 너비를 가지므로 래퍼에 있어야하므로 가운데 맞춤이됩니다. 그것은 모두 역동적이어야합니다. 순서는 헤더, 슬라이더, 내용이 될 것입니다. –

귀하의 질문에 100 % 이해가되지 않습니다. 하지만 문제가있는 것을 발견했습니다. 슬라이드 뒤에있는 내비게이션은 .wrapper .slider-container #slideshow > div 슬라이드가 position:absolute으로 설정되어 있기 때문입니다.

.slider-container 높이를 고정 높이로 설정해보십시오. 그렇지 않으면 슬라이드가 내용 위에있게됩니다. 몸은 height:100%;

픽셀의 높이가 고정되지에게 비율을 .slide-container 줄 필요는 없습니다 -이 중 어느 것도 수레를 필요가 없습니다 -

출처

2013-03-15 12:48:36 madhushankarox

그래, 그게 해결 될지는 모르겠지만 그것이 나의 최후의 수단이 될 것입니다. 슬라이더 높이가 동적 이도록하여 가로 세로 비율을 유지할 수 있도록 브라우저 크기를 조정하십시오. –

이 경우 자바 스크립트를 사용합니다. 미안 순수한 CSS 수정에 대해 모르겠다. – madhushankarox

당신은

즉 .header

, .main-content, #slideshow을 떠해서는 안 일을 떠 있습니다. . 위의 작업을 수행하면 문제가 해결됩니다.

출처

2013-03-15 12:50:10

래퍼 div에 콘텐츠 div를 배치 할 예정입니까? –

네, 그렇습니다.다른 블록 요소와 함께 블록 요소를 표시하려고 할 때만 부동 요소를 사용해야합니다. 실제로 사용하는 방법을 사용하면 모든 요소가 분리 된 것처럼 보이는 '.slide-container'뒤에 실제로 '.main-content' 서로 –

Div는 래퍼에 들어 가지 않습니까?

답변

관련 문제