【发布时间】：2014-02-05 16:02:54
【问题描述】：
我想做的是在我的页面下方和上方都有这样的事情：
我尝试的是取决于这两个参考：
我也很少看其他页面...
我尝试了，将它们混合起来，然后删除了一些东西，但仍然无法正确处理，我也明白即使这个网站也有不足，当我使用调试器向他们注入更多内容时......
所以我正在寻找一种最好的方法，我的最小高度为 100%，顶部 10px 高度 div，内容 div，然后 10px 高度底部 div...
为什么我不简单地使用边距？
很高兴您问到，如果我使用边距，那么 100% 页面将显示滚动，导致总高度超过 100%，如果我使用挂起，那么我的边框半径将不起作用，它将发生在浏览器边框上...
CSS没有办法吗？
如果CSS没有办法，jQuery有没有办法？
我的失败尝试
我几乎替换了我所有的 CSS 以实现参考中的那些...
<body>
<div class="page-container">
<!--Top Margin-->
<div class="top-margin"></div>
<!--Content Here-->
<div class="layout-place-holder">
<div class="carousel-place-holder">
</div>
<div class="menu-place-holder">
</div>
<div class="content-place-holder">
<br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/>
</div>
<div class="footer-place-holder">
</div>
</div>
<!--Bottom Margin-->
<div class="bottom-margin"></div>
</div>
</body>
html,
body,
form{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
body{
background-image: url("images/bg_texture.png");
}
.page-container{
position:relative; /* needed for footer positioning*/
margin:0 auto; /* center, not in IE5 */
height:auto !important; /* real browsers */
height:100%; /* IE6: treaded as min-height*/
min-height:100%; /* real browsers */
}
.top-margin{
height: 10px;
width: 100%;
}
.bottom-margin{
height: 10px;
width: 100%;
bottom: 0;
position: absolute;
}
.layout-place-holder {
margin: 0 auto;/*Center - with no float*/
background-color: #269abc;
height: 100%;
width: 960px;
/*tl,tr,br,bl*/
-webkit-border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-ms-border-radius: 10px 10px 10px 10px;
border-radius: 10px 10px 10px 10px;
}
我到底想要什么？
我想要的是一个页面，上下都有10px的边距，当内容很少的时候，它应该是全部100%，否则如果内容用完了空间，或者即将进入底部边距区域，它应该增加中间div的大小，并且仍然将底部放在文档底部，而不仅仅是浏览器。
注意
我不会使用表格，因为在某些情况下它对我来说非常重要
回答
示例链接：http://jsfiddle.net/mimosh_pisholack/9z8MP/2/
特别感谢“Alan Piralla”，我发现 JQuery 中的每个元素都有一个高度，所以我做了以下操作：
PS：不要担心脚本，我只是定义一个类，你可以将 function(){...} 放在 document.ready 中，但由于你还必须在调整大小时检查它，所以我没有t.
脚本[固定]：
MyMethods={
setTemplate: function(){
var winHeight = $(window).height();
var layoutHeight = $("#layout-place-holder").height();
var topMarginHeight = $("#top-margin").height();
var bottomMarginHeight = $("#bottom-margin").height();
var winContentRequiredHeight=winHeight-bottomMarginHeight-topMarginHeight;
$('#layout-place-holder').height(MyMethods.max(winContentRequiredHeight, layoutHeight));
/*$(".content-place-holder").css("height",requiredHeight);*/
},
max: function (a,b){
return (a>b)?a:b;
}
}
// WHat to do on load?
$(document).ready(function($){
MyMethods.setTemplate();
});
// WHat to do on resize?
$(window).resize(function(){
MyMethods.setTemplate();
});
HTML：
<body>
<div class="page-container">
<!--Top Margin-->
<div id="top-margin" class="top-margin"></div>
<!--Content Here-->
<div id="layout-place-holder" class="layout-place-holder">
<div class="carousel-place-holder">
</div>
<div class="menu-place-holder">
</div>
<div class="content-place-holder">
<br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/>
</div>
<div class="footer-place-holder">
</div>
</div>
<!--Bottom Margin-->
<div id="bottom-margin" class="bottom-margin"></div>
</div>
</body>
CSS
html,
body,
form{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
body{
background-image: url("images/bg_texture.png");
}
.page-container{
position:relative; /* needed for footer positioning*/
margin:0 auto; /* center, not in IE5 */
height:auto !important; /* real browsers */
height:100%; /* IE6: treaded as min-height*/
min-height:100%; /* real browsers */
}
.top-margin{
height: 10px;
width: 100%;
}
.bottom-margin{
height: 10px;
width: 100%;
/*bottom: 0;
position: absolute;*/
}
.layout-place-holder {
margin: 0 auto;/*Center - with no float*/
background-color: #269abc;
height: 100%;
width: 960px;
/*tl,tr,br,bl*/
-webkit-border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-ms-border-radius: 10px 10px 10px 10px;
border-radius: 10px 10px 10px 10px;
}
【问题讨论】：