HTML/CSS Divs 在浏览器调整大小上移动

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 浏览器

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，你可以把它放在身体底部的条件 cmets 中：

<!--[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]-->

将它放在正文的底部，避免需要检查文档是否已加载，您应该很好。