Question

我在处理嵌套div中的填充时遇到了麻烦。

问题在于我在顶部有一个横幅（小条形图），另一个在横幅下方有更多内容，称为横幅。横幅的高度为150px，我希望将整个空间填充在顶部和底部10％。我还有一个“中心”div包含在“bannerspace”div中，它将所有内容集中在一条直线中间，用于组织。

然而，每当我应用padding-top：10％时，填充应用于整个body元素，使填充比我预期的要大得多。

我花了几个小时寻找解决方案，甚至问我的网络开发朋友，我无法得到一个有效的答案。我发现这可能是垂直填充的预期行为，但我不确定你是否有任何解决方案。

我已经尝试过改变大多数元素的定位以及盒子大小调整方法，这两种方法都没有帮助。我也试过使用保证金，但同样的问题仍然适用。

这是我的身体HTML（头部无关紧要）：

<body>
    <div class="header">
        <!--Header Bar (Top) - "Stats" on PD-->
        <div class="center">
            <div class="stat1">
                Filler: <br>
                Test
            </div>
            <div class="stat2">
                Filler: <br>
                Test
            </div>
            <div class="stat3">
                Filler: <br>
                Test
            </div>
            <div class="stat4">
                Filler: <br>
                Test
            </div>
            <div class="stat5">
                Filler: <br>
                Test
            </div>
        </div>
    </div>
    <div class="banner">
        <!--Banner Bar (Middle) - "Banner" on PD-->
        <div class="center">
            <div class="bannerlogo">
                Logo
            </div>
            <div class="bannerspace">
                <div class="loginarea">
                Filler
                </div>
                <div class="registerarea">
                Filler
                </div>
            </div>
        </div>
    </div>
    This will be the homepage!
    <form name="input" action="LoginPage.html" method="get">
        <input type="submit" value="Login">
    </form>
    <form name="input" action="AccountPage.html" method="get">
        <input type="submit" value="Account">
    </form>
    <form name="input" action="OtherPage1.html" method="get">
        <input type="submit" value="Other 1">
    </form>
    <form name="input" action="OtherPage2.html" method="get">
        <input type="submit" value="Other 2">
    </form>
    <form name="input" action="OtherPage3.html" method="get">
        <input type="submit" value="Other 3">
    </form>
</body>

我的CSS：

html {
    height: 100%;
    width: 100%;
    margin: 0px;
    font-family: "Roboto Normal 400", "Roboto", sans-serif;
    font-size: 20px;
    padding: 0px;
    margin: 0px;

}

body {
    height: 100%;
    width: 100%;
    margin: 0px;
    text-align: center;
    background: #DAFFDA;
    padding: 0px;
    text-align: center;
    padding: 0px;
    margin: 0px;
}


.center {
    width: 90%;
    height: 100%;
    margin-left: 5%;
    margin-right: 5%;
    position: absolute;
}

.header {
    height: 50px;
    width: 100%;
    border: 0px solid black;
    background-color: #7C7C7C;
    margin: 0px;
    text-align: center;
    border-bottom-width: 2px;
    border-bottom-color: #3D3D3D;
    position: relative;
}

.banner {
    height: 150px;
    width: 100%;
    border: 0px solid black;
    background-color: #6EFF81;
    margin: 0px;
    text-align: center;
    border-bottom-width: 2px;
    border-bottom-color: #3D3D3D;
    position: relative;
}

.bannerlogo {
    margin-top: 15px;
    margin-bottom: 15px;
    margin-left: 2%;
    margin-right: 2%;
    height: 80%;
    width: 36%;
    text-align: center;
    float: left;
    display: table-cell;
    line-height: 120px;
    vertical-align: middle;
    border-width: 1px;
    border-color: black;
    border-style: solid;
    position: absolute;
}

.bannerspace {
    height: 100%;
    width: 60%;
    float: right;
    padding-top: 10%;
    padding-top: 10%;
}

.loginarea{
    height: 80%;
    width: 50%;
    float: left;
}

.registerarea {
    height: 80%;
    width: 50%;
    float: left;
}

抱歉打扰了。如果您能指出任何涵盖信息的指南/教程，那么我将不胜感激。

编辑：此外，请务必注意，只有在使用百分比时才会出现此行为。当我使用像素测量（最大130px，因为字体大小为20像素）时，填充是从“Banner”类div的末尾添加的，这是正确的。

Answer 1

当使用宽度％值时，垂直填充或边距使用父宽度作为référence。

你可以尝试使用额外的元素或伪元素来填充你想要填充的区域，使用高度继承。

这将是空伪：

.banner {height:150px;}
.center, .bannerspace {height:100%;}
.bannerspace:before , .bannerspace:after {
content:'';
display:block;
height:10%;
}

还要注意使用box-sizing。

嵌套Div中的顶部/底部填充具有百分比

1 个答案: