我正在尝试创建一个从顶部和底部有 0 边距的页面。但是由于某种原因,我无法让所有东西都坚持顶部和底部。还有一个height
问题:虽然我什么height:100%;
都有,但<div>
s的高度超过了窗口的高度。此外,当屏幕尺寸增加时(例如,当它大于 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>
列的其他 s。我还希望高度是屏幕大小,除非单击第二个标题,在这种情况下,我希望 div 高度增加以将深灰色区域扩展到最后一行文本的底部。我还想将整个事物居中,当屏幕尺寸增加时,它无法居中。