在下面显示的标记中,我试图让内容div一直延伸到页面的底部,但只有在显示内容时它才会拉伸.我想这样做的原因是,即使没有任何内容要显示,垂直边框仍会显示在页面下方.
这是我的HTML:
<body>
<form id="form1">
<div id="header">
<a title="Home" href="index.html" />
</div>
<div id="menuwrapper">
<div id="menu">
</div>
</div>
<div id="content">
</div>
我的CSS:
body {
font-family: Trebuchet MS, Verdana, MS Sans Serif;
font-size:0.9em;
margin:0;
padding:0;
}
div#header {
width: 100%;
height: 100px;
}
#header a {
background-position: 100px 30px;
background: transparent url(site-style-images/sitelogo.jpg) no-repeat fixed 100px 30px;
height: 80px;
display: block;
}
#header, #menuwrapper {
background-repeat: repeat;
background-image: url(site-style-images/darkblue_background_color.jpg);
}
#menu #menuwrapper {
height:25px;
}
div#menuwrapper {
width:100%
}
#menu, #content {
width:1024px;
margin: 0 auto;
}
div#menu {
height: 25px;
background-color:#50657a;
}
Jas*_*dez 109
你的问题不是div不是100%的高度,而是它周围的容器不是.这对我怀疑你正在使用的浏览器有帮助:
html,body { height:100%; }
您可能还需要调整填充和边距,但这将使您获得90%的路径.如果您需要使其适用于所有浏览器,您将不得不使用它.
这个网站有一些很好的例子:
http://www.brunildo.org/test/html_body_0.html
http://www.brunildo.org/test/html_body_11b.html
http://www.brunildo.org/test/index.html
我还建议你去http://quirksmode.org/
Gim*_*ima 43
我将尝试直接在标题中回答这个问题,而不是一直坚持将页脚粘贴在页面底部.
演示(拖动框架手柄以查看效果):http://jsfiddle.net/NN7ky
(上行:干净,简单.缺点:需要flexbox - http://caniuse.com/flexbox)
HTML:
<body>
<div class=div1>
div1<br>
div1<br>
div1<br>
</div>
<div class=div2>
div2<br>
div2<br>
div2<br>
</div>
</body>
CSS:
* { padding: 0; margin: 0; }
html, body {
height: 100%;
display: flex;
flex-direction: column;
}
body > * {
flex-shrink: 0;
}
.div1 { background-color: yellow; }
.div2 {
background-color: orange;
flex-grow: 1;
}
ta-da - 或者我太困了
Kev*_*ead 16
尝试使用以下css规则:
#content {
min-height: 600px;
height: auto !important;
height: 600px;
}
更改高度以适合您的页面.对于跨浏览器兼容性,提到两次高度.
你可以用min-height声明来破解它
<div style="min-height: 100%">stuff</div>
您可以使用“vh”长度单位作为元素本身及其父元素的 min-height 属性。从 IE9 开始就支持：
<body class="full-height">
<form id="form1">
<div id="header">
<a title="Home" href="index.html" />
</div>
<div id="menuwrapper">
<div id="menu">
</div>
</div>
<div id="content" class="full-height">
</div>
</body>
CSS：
.full-height {
min-height: 100vh;
box-sizing: border-box;
}