Почему верхнее поле тела все еще разрушается?
Обычно при схлопывании родительского поля overflow: hidden помогает, но в этой ситуации это не работает. Другие исправления работают нормально padding:0.01px,position absolute. Вы можете объяснить, почему здесь не работает переполнение?
html {
background: #e3b5a4;
height: 100%;
}
body {
background: #d1cfcd;
width: 960px;
height: 100%;
margin: 0px auto;
overflow: hidden;
}
div {
text-align: center;
background: #eee;
border: 1px solid;
padding: 10px;
margin: 10px;
}<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>layout</title>
</head>
<body>
<div class = "header">Header</div>
<div class = "navigation">Navigation</div>
<div class = "leftcontent">Content Left</div>
<div class = "main-content">Main Content</div>
<div class = "right-content">Content Right</div>
<div class = "footer">Footer</div>
</body>
</html>Извините, я имел в виду маржу, а не границу, как это stackoverflow.com/questions/19718634/…
Ответы 2
Это нормальное поведение для полей - просто установите для margin-top для .header значение 0:
html {
background: #e3b5a4;
height: 100%;
}
body {
background: #d1cfcd;
width: 960px;
height: 100%;
margin: 0px auto;
overflow: hidden;
}
div {
text-align: center;
background: #eee;
border: 1px solid;
padding: 10px;
margin: 10px;
}
.header {
margin-top: 0;
} <!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>layout</title>
</head>
<body>
<div class = "header">Header</div>
<div class = "navigation">Navigation</div>
<div class = "leftcontent">Content Left</div>
<div class = "main-content">Main Content</div>
<div class = "right-content">Content Right</div>
<div class = "footer">Footer</div>
</body>
</html>Извините за ошибки, может быть, вы меня не правильно поняли. Я хочу, чтобы верхнее поле для первого div также было 10 пикселей, как и везде. Работает, если добавить padding: 0.01px; в тело. И если я добавлю обертку div и сделаю ее overflow: hidden, она тоже работает, но почему overflow: hidden не работает с телом?
Потому что, если вы не установите значение переполнения, отличное от видимого для элемента html, overflow:hidden, установленный в теле, будет перенесен в область просмотра. Таким образом, он не применяется к элементу body и, следовательно, не может остановить схлопывание поля. Чтобы исправить это, просто установите для элемента html значение auto.
html {
background: #e3b5a4;
height: 100%;
overflow:auto;
}
body {
background: #d1cfcd;
width: 960px;
height: 100%;
margin: 0px auto;
overflow: hidden;
}
div {
text-align: center;
background: #eee;
border: 1px solid;
padding: 10px;
margin: 10px;
}<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>layout</title>
</head>
<body>
<div class = "header">Header</div>
<div class = "navigation">Navigation</div>
<div class = "leftcontent">Content Left</div>
<div class = "main-content">Main Content</div>
<div class = "right-content">Content Right</div>
<div class = "footer">Footer</div>
</body>
</html>
Вы можете немного подробнее объяснить, что вы имеете в виду? Например, что вы имеете в виду под
parent's border collapsing?