为什么 body min-width 不能与固定 div 一起使用？答案

【问题标题】：Why does body min-width not work alongside fixed divs?为什么 body min-width 不能与固定 div 一起使用？
【发布时间】：2016-01-01 08:17:29
【问题描述】：

这是一个 JSfiddle，其中包含我的问题的代码： https://jsfiddle.net/367v2n1q/14/

在右侧，您会看到一个固定位置的红色条。我试图让主体的最小宽度为 808 像素，但它让我将主体的大小重新调整为小于 808。

中心 div 在达到 808 像素宽时停止收缩，但右侧的固定 div 继续前进并包围其余内容。

CSS

body.total{
    background-color: black;
    position: relative;
    min-width: 808px;
}
.rightSidePane {
    position: absolute;
    background-color: red;
    clear: both;
    top: 0;
    right: 0;
}

HTML sn-p

<!DOCTYPE html>
<html>
    <head>
        <!-- head stuff here -->
    </head>
<body class="total">
        <div id="wrapper" class="leftSidePane">

            <!-- Sidebar -->
            <div id="sidebar-wrapper">
                <ul class="sidebar-nav">
                    <li class="sidebar-brand">
                    </li>
                    <li>
                    </li>
                    <li>
                    </li>
                </ul>
            </div>
        </div>
        <div class="content">

<div class="mainContent">
    <h1>
        WWW.SITE.COM
    </h1>
    <h2>dedicated to stuff</h2>
    <p style="text-align: center;
    color: #5D5D5D;">last updated: 01.01.2016</p>
    <br>
    <p style="
       font-family: 'Times New Roman';
       color: #C1C1C1;
       font-weight: bold;
       font-size: 20px;
       text-align: center;
       ">Site visited 27 times</p>
    <br><br>
    <hr>
</div>
</div>
<div class="rightSidePane">

    <!-- Side bar -->
    <div id="sidebar-wrapper">
        <ul class="sidebar-nav">
            <li class="sidebar-brand-right">
            </li>
            <li>
                <a href="#">
                </a>
            </li>
            <li>
                <div class="barfix"></div>
            </li>
            <li class="board">
            </li>
            <li class="nextBar">
            </li>
            <li>
    <div class="tileRightInit" id="bs">
        <div class="barTextRight">MAIN</div>
    </div>
</li>
<li>
    <div class="tileRight" id="bs">
        <div class="barTextRight">News</div>
    </div>
</li>
<li>
    <div class="tileRight" id="bs">
        <div class="barTextRight">Links</div>
    </div>
</li>
<li>
    <div class="tileRight" id="bs">
        <div class="barTextRight">Credits</div>
    </div>
</li>
<li>
    <div class="tileRight" id="bs">
        <div class="barTextRight">About</div>
    </div>
</li>

            <li class="bottomRight">
            </li>

        </ul>
    </div>

</div>
</body>
</html>

【问题讨论】：

body 元素的宽度永远不会低于 808 像素。你甚至会看到一个水平滚动条出现。
你说得对，它没有。我不明白发生了什么，正文是否在页面右侧移动？

标签： javascript html css

【解决方案1】：

我发现了问题所在。我需要对右侧的 div 使用绝对定位。这是固定的 JS 小提琴：https://jsfiddle.net/367v2n1q/15/

这是固定的 CSS：

body.total{
    background-color: black;
    position: relative;
    min-width: 840px;
}
.rightSidePane {
    position: absolute;
    background-color: red;
    clear: both;
    top: 0;
    right: 0;
}

HTML 保持不变。感谢@Roope 指出身体从未低于 808px 宽度，我不知道为什么我没有听懂，但你指出了正确的方向。

【讨论】：