Question

我知道这个问题似乎是重复的问题，但我承认我已经看了几个链接，并尝试了他们的决心，但它没有奏效。

我所拥有的是一个页面，其中包含一个小边框，彼此之间有几个div，然后我将页面分成3行div，一个应该是页脚，另外两个是页眉和容器，< / p>

我的页面中没有任何内容是粘性的，所有内容都应该滚动，...

我检查了几个最后一个链接，我的新Style（LESS / CSS）文件变得像这样

@main-layout-padding-top-bottom:10px;

* {
    font-family: tahoma;
}

html, body {
    direction: rtl;
    height: 100%;
    padding: 0;
    margin: 0 auto;
    text-align: right;
}

.layout-main-holder {
    min-height: 100%;
    height: 100%;
    padding-bottom: @main-layout-padding-top-bottom;
    padding-top: @main-layout-padding-top-bottom;
    text-align: center;
    background-image: url('Images/stardust.png');

    >.layout-main-inner {
        width: 900px;
        background-image: url('Images/wet_snow.png');
        margin:  0 auto;
        min-height: 100%;
        height:100%;
        padding-top: 10px;
        -ms-border-radius: 10px;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        border-radius: 10px;

        -webkit-box-shadow: 2px 2px 2px;
        -moz-box-shadow: 2px 2px 2px;
        -ms-box-shadow: 2px 2px 2px;
        box-shadow: 2px 2px 2px;
    }

}

.layout-header {
    height: 40px;
    font-size: 35px;
    font-weight: bold;
}

.layout-content {
    padding: 10px;
    text-align: right;
    display: block;
    position:relative;
    margin: 0 auto;
    height:auto !important; /* for all browsers */
    height:100%; /* for IE6 which treats this as min-height*/
    min-height:100%; /* for all browsers */
}

@footerHeight:20px;

.layout-footer {
    position:absolute;
    //width:100%;
    bottom:@main-layout-padding-top-bottom; /* stick to bottom */
    height:@footerHeight;

    /*padding: 10px;*/

    //left: 0;
    width: 900px;

    >div
    {
        font-size: 14px;
        font-weight: bold;
        direction: ltr;
        font-family: 'Times new roman';

        padding-left: 20px;
        width: 100%;
        margin: auto;
        text-align: left;
    }
}

但仍有问题，例如，当内容从页面溢出时，而不是增加容器高度。另一个问题让我一直担心，如果我滚动了一下，我看到我的页面下面有一个白色的框，我不知道它来自哪里，当我检查firefox中的布局，甚至我的HTML标签不会填满整个页面，因此白色框保留在那里：|

我的html布局是这样的：

<!DOCTYPE html>
<html>
    <head>
        <title>@ViewBag.Title</title>

        <link href="~/Components/bootstrap-3.1.1-dist/css/bootstrap.min.css" rel="stylesheet"/>


        <link href="~/Content/layout.less" type="text/css" rel="stylesheet"/>
        <link href="~/Content/style.less" type="text/css" rel="stylesheet"/>

        <script src="~/Scripts/jquery-2.1.1.min.js"></script>

        <script src="~/Components/bootstrap-3.1.1-dist/js/bootstrap.min.js"></script>
    </head>
    <body>
        <div class="layout-main-holder">
            <div class="layout-main-inner">
                <div class="layout-header">
                    اشتراک لینک
                </div>
                <div class="layout-content">
                    @RenderBody()
                </div>
                <div class="layout-footer">
                    <div>
                        &copy; 2014 Faridad Company
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

我有关于修复我的页面页脚的Css问题

0 个答案: