顶部和底部的CSS Div Margin [Answer Inserted]

时间：2014-01-16 16:12:39

标签： jquery html css css3

我想要做的是在我的页面下方和上方都有这样的事情：

enter image description here

我尝试的是取决于这两个参考：

我也很少看其他一些页面......

我尝试过，把它们混合起来，然后删除它们仍然无法正常运行，我也明白，即使这个网站也缺乏，当我使用调试器向他们注入更多内容时......

所以我正在寻找一种最好的方式，我的最小高度为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">
                &nbsp;
                <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">
                &nbsp;
                <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;
}

3 个答案:

答案 0 :(得分：4)

我认为你需要的是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%;
}

http://jsfiddle.net/mblase75/r4aXB/

答案 1 :(得分：1)

我有一个类似的案例要解决，最后用jQuery解决它。 你应该做的事情的存根：

A）编写一个函数来计算窗口的高度

var winHeight = $(window).height();

B）计算内容的高度：

var contHeight = $('#your-content-div').height() - 20; // 20 = total margin added to top and bottom, set it in accordance with next instruction.

通过CSS将10px边距设置为div的顶部和底部。

现在编写一个函数，将内容大小设置为winHeight和contHeight中的最大值。

$('#your-content-div').height(max(winHeight, contHeight);

最后，将它全部包装到一个函数中，以调用每个窗口调整大小：

$(window).resize(function() { /* reset your heights here. */ });

这些提示应该可以胜任。

答案 2 :(得分：1)

<div class="wrap">
    <div class="contents">This is test.</div>
</div>

.wrap {
    padding: 10px 20px;
   background:#0000ff;

}
.contents {
    margin: 0 auto;

    background: White;
    border-radius: 10px;  
    height: 100%;
padding: 20px;
}

检查这个小提琴：

http://jsfiddle.net/HWZMD/1/

相关问题
最新问题