Question

我正在尝试在浏览内容时将div固定在浏览器窗口中，但我似乎无法让它工作。

以下是我到目前为止所做的事情：

HTML

<section id="adminpanel">
        <!--Drop down-->
        <!--Button-->
        <!--Drop down-->
        <!--Button-->
        <!--Drop down-->
        <!--Button-->
</section>
<!--This is the content section-->
<div class="content">
    <div id="accounts">
        <!--content-->
    </div>
    <div id="facilities">
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
    </div>
</div>
<footer>
    <p>Copyright &copy</p>
</footer>

CSS

html, body {
    height:100%;
    min-height: 100%;
    background-color:grey;
    margin: 0;
    padding: 0;
    border: 0;
}

#adminpanel {
    line-height:30px;
    background-color:#eeeeee;
    height:100%;
    width:15%;
    float:left;
}
.content {
    position: relative;
    width:85%;
    min-height: 100%;
    float:left;
    background-color:silver;
    margin-bottom: 60px;
}
footer {
    text-align:center;
    position: fixed;
    padding:5px;
    left:0px;
    bottom:0px;
    width:100%;
    background: #999999;
}

这里是JSFiddle，展示了我到目前为止所处的位置。

我已尝试在position: fixed;上设置#adminpanel，但这似乎让其他所有内容变得混乱，任何帮助都会非常感激。

Answer 1

https://jsfiddle.net/or9vkxuu/1/

#adminpanel {
    line-height:30px;
    background-color:#eeeeee;
    height:100%;
    width:15%;
    float:left;
    position:fixed;
}
.content {
    position: relative;
    width:85%;
    min-height: 100%;
    float:left;
    background-color:silver;
    margin-bottom: 60px;
    margin-left: 15%;
}

如果您将位置固定在该元素上，则需要在内容元素中添加具有相同宽度的margin-left，因为#adminpanel不再堆叠。

Answer 2

在某些浏览器中，您必须为display: block等html5语义元素分配article, nav, footer, section, etc..。

因此display: block和position: fixed对我来说非常好。

Answer 3

DEMO：https://jsfiddle.net/or9vkxuu/2/

<!DOCTYPE html>
<head>
    <style>
        html, body {
            height: 100%;
            margin: 0px;
        }

        #adminpanel {
            line-height: 30px;
            background-color: #eeeeee;
            height: 100%;
            width: 15%;
            float: left;
        }

        .content {
            width: 85%;
            min-height: 100%;
            float: left;
            background-color: silver;
            margin-bottom: 60px;
        }

        footer {
            text-align: center;
            position: fixed;
            padding: 5px;
            left: 0px;
            bottom: 0px;
            width: 100%;
            background: #999999;
        }
    </style>
</head>

<body>
<section id="adminpanel">
    <p> Left Admin panal</p>
    <!--Drop down-->
    <!--Button-->
    <!--Drop down-->
    <!--Button-->
    <!--Drop down-->
    <!--Button-->
</section>
<!--This is the content section-->
<div class="content">
    <div id="accounts">
        <!--content-->
    </div>
    <div id="facilities">
        <p>test</p>

        <p>test</p>

        <p>test</p>

        <p>test</p>

        <p>test</p>

        <p>test</p>

        <p>test</p>

        <p>test</p>

        <p>test</p>

        <p>test</p>

        <p>test</p>

        <p>test</p>

        <p>test</p>

        <p>test</p>

        <p>test</p>

        <p>test</p>

        <p>test</p>

        <p>test</p>

        <p>test</p>

        <p>test</p>

        <p>test</p>

        <p>test</p>

        <p>test</p>

        <p>test</p>
    </div>
</div>
<footer>
    <p>Copyright &copy</p>
</footer>
</body>
</html>

将一个部分固定在浏览器窗口中

3 个答案: