Question

请查看此示例：

html, body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    background-color: #abebff;
    padding: 0;
    height: 100%;
}

.box {
    border: 1px red dotted;
}

#side-menu {
    background-color: #204d74;
    padding: 0px;
}

#side-menu h1 {
    color: whitesmoke;
    text-align: center;
    margin: 10px 0px;
    font-size: 25px;
}

.display-table {
    display: table;
    padding: 0px;
    height: 100%;
}

.display-table-row {
    display: table-row;
    height: 100%;
}

.display-table-cell {
    display: table-cell;
    float: none;
    height: 100%;
}

.valign-top {
    vertical-align: top;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>

<div class="container-fluid display-table">
    <div class="row display-table-row">
        <!--Side Menu-->
        <div class="col-md-2 display-table-cell valign-top" id="side-menu">
            <h1>Navigation</h1>
        </div>
        <!--Content-->
        <div class="col-md-10 box display-table-cell valign-top">

        </div>
    </div>
</div>

<script src="jquery/jquery-1.12.3.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>

我尝试创建简单的管理面板，但无法理解如何删除html页面周围的空闲空间？我使用了填充或边距和其他css元素但没有修复。请帮我。谢谢。

Answer 1

代码似乎很好，除非您没有向width div提供display-table。像这样改变：

.display-table {
    display: table;
    padding: 0;
    height: 100%;
    width: 100%; //added
}

html, body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    background-color: #abebff;
    padding: 0;
    height: 100%;
}

.box {
    border: 1px red dotted;
}

#side-menu {
    background-color: #204d74;
    padding: 0px;
}

#side-menu h1 {
    color: whitesmoke;
    text-align: center;
    margin: 10px 0px;
    font-size: 25px;
}

.display-table {
    display: table;
    padding: 0px;
    height: 100%;
    width:100%
}

.display-table-row {
    display: table-row;
    height: 100%;
}

.display-table-cell {
    display: table-cell;
    float: none;
    height: 100%;
}

.valign-top {
    vertical-align: top;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>

<div class="container-fluid display-table">
    <div class="row display-table-row">
        <!--Side Menu-->
        <div class="col-md-2 display-table-cell valign-top" id="side-menu">
            <h1>Navigation</h1>
        </div>
        <!--Content-->
        <div class="col-md-10 box display-table-cell valign-top">

        </div>
    </div>
</div>

<script src="jquery/jquery-1.12.3.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>

如何删除内容周围的空间（css）？

1 个答案: