Я пытаюсь создать страницу с 0 маркой сверху и снизу. Но по какой-то причине я не могу заставить все придерживаться верхней и нижней. Также есть проблема с height
: хотя у меня height:100%;
для всего, высота <div>
превышает высоту окна. Кроме того, контент не центрируется на экране, когда размер экрана увеличивается (например, если он больше 1366 * 768).
Страница имеет три столбца с float:left;
, завернутый в <div>
. У меня есть в основном такой html
код:
<div id="wrapper">
<div class="col" id="col1"></div>
<div class="col" id="col2"></div>
<div class="col" id="col3"></div>
</div>
У меня есть CSS, который их модифицирует:
body, html {
background-color: darkgray;
margin: 0;
height: 100%;
width: 100%;
}
#wrapper {
width: 80%;
height: 100%;
margin-top: 0;
margin-left: 10%;
margin-right: 10%;
margin-bottom: 0;
padding: 10px;
background-color: #666;
color: white;
min-width: 722px;
max-width: 1119px;
font-family: 'Roboto Condensed', sans-serif;
box-shadow: 0px 0px 25px black;
}
.col {
/*background-color: red;*/
height: 100%;
float:left;
margin-top: 0;
margin-right: 0.6667%;
margin-left: 0.6667%;
}
#col1 {
width: 24%;
}
#col2 {
width: 48%;
box-shadow: 0px 0px 5px black;
}
#col3 {
width: 24%;
}
Вы можете увидеть страницу здесь в этом jsfiddle.
Я хочу, чтобы <h1>
(более темная серая область) придерживался вершины, а также другой <div>
который является столбцами. Я также хочу, чтобы высота была размером экрана, если не щелкнуть второй заголовок, и в этом случае я хочу увеличить высоты div, чтобы расширить темную серое пространство до нижней части последней строки текста. Я также хочу сосредоточить все это, что не может центрировать, когда размер экрана увеличивается.
Это padding: 10px;
в #wrapper
<div>
который вызывает разрыв в верхней части. Удаление, которое закрепило <div>
в верхней части страницы. Также добавление margin: 0 auto;
к #wrapper
центрируется wrapper
div на странице.
I have update your css property like **#wrapper** I just Add display:table;
#wrapper {
width: 80%;
height: 100%;
margin-top: 0;
margin-left: 10%;
margin-right: 10%;
margin-bottom: 0;
padding: 10px;
background-color: #666;
color: white;
min-width: 722px;
max-width: 1119px;
font-family: 'Roboto Condensed', sans-serif;
box-shadow: 0px 0px 25px black;
display:table;
}
Попробуйте следующее: http://jsfiddle.net/JN8Cs/
Добавьте 'clearfix' в #wrapper и удалите 100% высоту #wrapper & body
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
Как это
css * {
margin:0;
padding:0;
}
body, html {
background-color: darkgray;
margin: 0;
height: 100%;
width: 100%;
overflow:hidden;
}