Question

嘿，每当我调整保证金时，嘿家伙似乎都会出现白线。我调整的边距是.box，当我将其调整为10px时，将出现10px白线的长度，每当我将其调整为40px时，就会出现长度为40px的白线。

问题是我不希望侧栏上面也有白线。侧栏应该有100％的高度

HTML code：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8"/>
        <title> File Manager </title>
        <link rel="stylesheet" href="main.css"> 
        <?php include "php/getrecord.php";?>
    </head>

    <body>
        <div id="sidemenu">
            <h2>Records</h2>
            <ul>
                <li><a onclick="document.getElementById('Modaladdrec').style.display='block'">Add New Record</a></li>
            </ul>
        </div>

        <div class="sectionbox">
            <?php while ($doc = $uid->fetch(PDO::FETCH_ASSOC)):?>
                <div class="box">
                    <label>Height: <?php echo $doc["height"];?></label>
                    <br>
                    <label>Weight: <?php echo $doc["weight"];?></label>
                    <br>
                    <label>BMI: <?php echo $doc["bmi"];?></label>
                </div>
            <?php endwhile;?>
        </div>         
    </body>
</html>

CSS代码：

.box {
    width: 320px;
    padding: 10px;
    border: 5px solid gray;
    margin: 20px;
}

.sectionbox {
    margin-left: 200px;
}

body, html {
    padding: 0;
    margin: 0;
    top: 0;
    height: 100%;
    width:100%;
}

div, span, p, form, label{
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

#sidemenu {
    background: rgb(74, 10, 2);
    list-style: none;
    margin: 0;
    padding: 0;
    width:192px;
    height: 100%;
    position: fixed;
}

#sidemenu h2 {
    list-style: none;
    display: block;
    padding-left: 52px;
    color: #ccc;
    font: 30px "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
}

#sidemenu h3 {
    margin-bottom: 10px;
    margin-top: 40px;
    list-style: none;
    display: block;
    padding-left: 52px;
    color: #ccc;
    font: 20px "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
}

#sidemenu li {
    font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
    list-style: none;
    cursor: pointer;
}

#sidemenu a {
    background: rgb(74, 10, 2);
    border-bottom: 1px solid rgb(74, 10, 2);
    color: #ccc;
    display: block;
    margin: 0;
    padding: 8px 12px;
    text-decoration: none;
    font-weight: normal;
}

#sidemenu a:hover {
    background: rgb(111, 17, 4);
    color: #fff;
    padding-bottom: 8px;
}

下图显示白线导致我的.box

边缘

Answer 1

试试这个：

Css ：

.sectionbox {
    padding-top: 20px;
}

Answer 2

我发现经常使用100％，这使得它相对于其他类/ id的其他尺寸，因此无法给出正确的测量结果。

您是否尝试过使用

身高：100vh;

Answer 3

我认为您需要做的就是添加一个＆＃34; float：left＆＃34;到您的分区：

＆＃13;

.box {
    width: 320px;
    padding: 10px;
    border: 5px solid gray;
    margin: 20px;
}

.sectionbox {
    margin-left: 200px;
    float: left;
}

body, html {
    padding: 0;
    margin: 0;
    top: 0;
    height: 100%;
    width:100%;
}

div, span, p, form, label{
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

#sidemenu {
    background: rgb(74, 10, 2);
    list-style: none;
    margin: 0;
    padding: 0;
    width:192px;
    height: 100%;
    position: fixed;
}

#sidemenu h2 {
    list-style: none;
    display: block;
    padding-left: 52px;
    color: #ccc;
    font: 30px "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
}

#sidemenu h3 {
    margin-bottom: 10px;
    margin-top: 40px;
    list-style: none;
    display: block;
    padding-left: 52px;
    color: #ccc;
    font: 20px "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
}

#sidemenu li {
    font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
    list-style: none;
    cursor: pointer;
}

#sidemenu a {
    background: rgb(74, 10, 2);
    border-bottom: 1px solid rgb(74, 10, 2);
    color: #ccc;
    display: block;
    margin: 0;
    padding: 8px 12px;
    text-decoration: none;
    font-weight: normal;
}

#sidemenu a:hover {
    background: rgb(111, 17, 4);
    color: #fff;
    padding-bottom: 8px;
}

＆＃13;

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8"/>
        <title> File Manager </title>
        <link rel="stylesheet" href="style.css"> 
    </head>

    <body>
        <div id="sidemenu">
            <h2>Records</h2>
            <ul>
                <li><a onclick="document.getElementById('Modaladdrec').style.display='block'">Add New Record</a></li>
            </ul>
        </div>

        <div class="sectionbox">
            
                <div class="box">
                    <label>Height: xxxx</label>
                    <br>
                    <label>Weight: yyyy</label>
                    <br>
                    <label>BMI: zzzz</label>
                </div>
        </div>         
    </body>
</html>

＆＃13;

点击＆＃34;运行代码段＆＃34;尝试解决方案。

每当调整保证金时，白线在顶部

3 个答案: