CSS Разметка Div растягивается по ширине и высоте

Я пытаюсь создать тему phpBB, но у меня возникли проблемы с настройкой DIV так, как я предполагал, что страница будет.CSS Разметка Div растягивается по ширине и высоте

Это то, что я ищу.

http://imgur.com/n6eZbsT (изображение, чтобы помочь с пониманием)

Это то, что я имел до сих пор.

index.html

<body> 
<div id='container'> 
    <div id='header'> 
    </div> 

    <div id='sidemenu'> 
    </div> 

    <div id='content'> 
    </div> 
</div> 

</body>

css.css

*{ 
    padding: 0px; 
    margin: 0px 
    } 

#header { 
    width:100%; 
    height:50px; 
    background-color:#6FF; 
    } 

#sidemenu { 
    display: block; 
    position:absolute; 
    width:100px; 
    height:100%; 
    background-color:#6F6; 
    }

Проблема с этим состоит в том, что sidemenu ДИВ перетекает в нижней части страницы и создает полосу прокрутки.

Я попытался ищет решение, и только удалось получить переполнение, чтобы уйти с помощью bottom:0px; внутри sidemenu CSS

Но это толкает заголовок вправо, и sidemenu в верхнем левом углу, как это ..

http://imgur.com/LKk9VtF

Я застрял здесь, CSS дает мне огромную головную боль ахаха. Может ли кто-нибудь помочь мне с решением?

Большое вам спасибо!

источник

2014-09-20 John Doe

Вы должны использовать height:calc(100% - 50px); top:50px; для вашего sidemenu. Запустите сниппет.

*{ 
 
    padding: 0px; 
 
    margin: 0px 
 
    } 
 

 
#header { 
 
    width:100%; 
 
    height:50px; 
 
    background-color:#6FF; 
 
    } 
 
html,body,#container{height:100%;} 
 

 
#sidemenu { 
 
    display: block; 
 
    position:absolute; 
 
    width:100px; 
 
    height:calc(100% - 50px); 
 
    top:50px; 
 
    background-color:#6F6; 
 
    }

<div id='container'> 
 
    <div id='header'> 
 
    </div> 
 

 
    <div id='sidemenu'> 
 
    </div> 
 

 
    <div id='content'> 
 
    </div> 
 
</div>

источник

2014-09-21 00:02:45

Это красиво, спасибо! Не знал, что вы можете сделать это в css. Надеюсь, это кросс-браузер дружелюбный. –

http://caniuse.com/#feat=calc IE9 + –

CSS Разметка Div растягивается по ширине и высоте

ответ

Смежные вопросы