我想做的是在我的页面下方和上方做这样的事情:
我尝试的是取决于这两个引用:
我也很少看其他页面...
我试过了，将它们混合起来，然后删除了一些东西，但仍然无法正确处理，我也明白即使这个网站也缺乏，当我使用调试器向它们注入(inject)更多内容时......
所以我正在寻找一个最好的方法，我的最小高度为 100%，顶部 10px 高度 div，内容 div，然后底部 div 10px 高度...
为什么我不简单地使用 margin ？
很高兴你问，如果我使用 margin 然后在 100% 页面上会显示滚动，导致总高度超过 100%，如果我使用 pending 那么我的 border-radius 将不起作用，它将发生在浏览器边框上...
难道没有办法用 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 中，但是因为你还必须在调整大小时检查它，所以我没有
脚本[固定]:
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;
}
最佳答案
我想你需要的是box-sizing: border-box .
简单的 html:
<div id="wrapper">
<div id="contents"><!-- stuff goes here --></div>
</div>
相当简单的 CSS:
* {
box-sizing: border-box;
}
html, body, #wrapper {
height: 100%;
background: #666;
margin: 0;
padding: 0;
}
#wrapper {
padding: 10px 0;
height: 100%;
}
#contents {
margin: 0 auto;
padding: 20px;
background: blue;
border-radius: 5px;
max-width: 80%;
min-height: 100%;
}
关于jquery - 顶部和底部的 CSS Div 边距 [已插入答案]，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21167013/