Как предотвратить мой div от разлива вне его родительского контейнера?

Вот мой код, взятый из кодекса: http://codepen.io/rags4developer/pen/ONoBpm Как предотвратить мой div от разлива вне его родительского контейнера?

Пожалуйста, помогите мне исправить эти проблемы.

Как предотвратить главный div & нижний колонтитул от выливания из контейнера div? переполнение: скрытый для контейнера не всегда работает!
Как сделать размер контейнера div равным высоте страницы без установки его высоты на фиксированный процент?

HTML:

<body> 
<div id="container"> 
    <div id="nav">nav links 1,2,3 etc</div> 
    <div id="main"> 
    <!--no text here--> 
    <div id="left">left panel</div> 
    <div id="right">right panel</div> 
    </div> 
    <div id="footer">footer</div> 
</div> 
</body>

CSS:

* {box-sizing: border-box;} 
html {height: 100%;} 
body {height: 100%;} 
#container { 
    border: 8px solid yellow; 
    height: 100%; 
    width: 80%; 
    margin: 0 auto; 
} 

#nav { 
    border: 4px solid red; 
    height: 15%; 
} 

#main { 
    border: 4px solid black; 
    height: 100%; 
    background: gray; 
} 

#left { 
    border-top: 4px solid green; 
    border-left: 4px solid green; 
    border-bottom: 4px solid green; 
    float: left; 
    width: 15%; 
    height:100%; 
    /*I will make this gradient later*/ 
    background: #9e9999; 
} 

#right { 
    border: 4px solid blue; 
    float: right; 
    width: 85%; 
    height: 100%; 
    border-radius: 20px 0 0 0; 
    background: white; 
} 

#footer { 
    border: 4px solid pink; 
    clear: both; 
}

источник

2016-04-26 HelloWorldNoMore

Вы пробовали узнать о flexbox? – Jason

Да, я читал об этом ненадолго. Поддержка браузеров по-прежнему не очень хороша. – HelloWorldNoMore

False. [Поддержка браузера отличная] (http://caniuse.com/#feat=flexbox). – Jason

Я не совсем уверен, если я вас правильно понимаю, но ваши высоты (т.е. высоты в пределах #container div) добавить до 15% + 100% + высота нижнего колонтитула = не менее 115% от высоты #container плюс высота нижнего колонтитула, что приводит к «переливанию».

Я изменил #content высоту 80% и добавил height: 5%; в сноске в этой вилке вашего codepen: http://codepen.io/anon/pen/EKeOdm

Теперь все остается в #container. Это то, что вы хотите?

источник

2016-04-26 23:31:21 Johannes

На самом деле, я хотел, чтобы nav, content и footer = 100% контейнера. Контейнер должен растягиваться вертикально, чтобы заполнить страницу, даже если у нее недостаточно содержимого для заполнения страницы. Если есть много контента, то я не против страницы с scollbar. – HelloWorldNoMore

clearfix решение все еще работает хорошо для плавающих элементов, ИМО. Попробуйте удалить стили высоты и добавить:

#main:before, 
 
#main:after { 
 
    display: table; 
 
    content: ""; 
 
} 
 

 
#main:after { 
 
    clear: both; 
 
}

Далее: http://nicolasgallagher.com/micro-clearfix-hack/

источник

2016-04-26 21:54:47 johnniebenson

Я удалил основную высоту и добавил код. Теперь плавающие элементы и нижние колонтитулы не расширяются вертикально до нижней части контейнера. – HelloWorldNoMore

Я не на 100% уверен, что вы имеете в виду расширение вертикально, можете ли вы объяснить? Мне интересно, почему вы хотите, чтобы контейнер устанавливался на высоту страницы, а не позволял росту расти на основе контента. Если вы _must_ имеете высоту, равную высоте страницы, вы, скорее всего, захотите использовать JS для этого. – johnniebenson

Использование таблицы отображения должно исправить это.

#container { 
    border: 8px solid yellow; 
    height: 100%; 
    width: 80%; 
    margin: 0 auto; 
    **display: table;** 
} 

#content { 
    border: 4px solid black; 
    background: gray; 
    height: 100%;/*Not sure 100% of what ? Parent ???*/ 
    **display: table-row;** 
}

источник

2016-04-28 22:20:37 HelloWorldNoMore

Как предотвратить мой div от разлива вне его родительского контейнера?

ответ

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