HTML/CSS Div 在浏览器调整大小时移动

Question

我有两个 div 需要填充一个页面。其中一个自动调整大小，另一个固定大小。调整大小的在左边，固定的在右边。当浏览器处于全屏状态时，这非常有效，但如果我将浏览器调整为特定大小，则调整大小的浏览器会移动到固定 div 下方的最右边，而固定 div 位于正确的位置。调整浏览器窗口大小时如何让 div 保持不变？

HTML:

<div class=wrapper>
    <div class=right>
        Right Fixed Sidebar
    </div>

    <div class=main>
        Main Resizing Content
    </div>
</div>

CSS:

.wrapper{
margin-top: 25px;
min-width: 630px;
}
.main{
overflow: hidden;
font-family: "Gill Sans","Gill Sans MT",Calibri,sans-serif;
font-size: 20px;
font-weight: 100;
margin-left: 25px;
height: 250px;
background: green;
}
.right{
float: right;
width: 300px;
height: 250px;
font-family: "Gill Sans","Gill Sans MT",Calibri,sans-serif;
text-align: center;
margin-right: 10px;
margin-left: 10px;
background: orange;
}

Answer 1

因此，只要您可以处理 IE9+(以及所有真正的浏览器，Android 浏览器 < 4.4 除外)，您就可以做一些非常简单但功能非常强大的事情。

HTML:

<div class=wrapper>
    <div class=main>
        Main Resizing Content
    </div><div class=right>
        Right Fixed Sidebar
    </div>
</div>

CSS:

.wrapper {
    margin-top:25px;
    min-width:630px;
    height:250px;
}

.right,
.main {
    display:inline-block;
    vertical-align:top;
    height:100%;
}

.right {
    width:300px;
}

.main {
    width:calc(100% - 300px);
}

快速解释:

• display:inline-block; 拥有 block 元素的所有优点，但可以内联显示 ... vertical-align:top; 以防你想要不同的元素高度
• 您为右侧的侧边栏设置固定宽度
• .main 元素的宽度正在使用 calc()，它的作用与它看起来完全一样......容器的全宽减去固定宽度 (等于右侧边栏)

Here is a jsFiddle showing a working model.

回退

很酷的是 display:inline-block; 可以回到 IE8，所以你唯一需要关心的是设置宽度。

如果您使用的是特征检测库，例如 Modernizr (如果你不是，你应该是)，那么你可以做一些结合 CSS 和 JS 的事情。

JS:

if(!Modernizr.csscalc){
    var container = document.querySelector('.wrapper'),
        main = container.querySelector('.main'),
        right = container.querySelector('.right');

    main.style.width = (container.clientWidth - right.clientWidth);
}

如果您使用的是 jQuery，则可以使用它的语法，只是尝试与库无关。如果你没有使用 Modernizr，你可以把它放在正文底部的条件注释中:

<!--[if lte IE 8]>
    <script type="text/javascript">
        var container = document.querySelector('.wrapper'),
            main = container.querySelector('.main'),
            right = container.querySelector('.right');

        main.style.width = (container.clientWidth - right.clientWidth);
    </script>
<![endif]-->

将它放在 body 的底部可以避免检查文档是否已加载，你应该擅长这一点。