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浏览器＆lt; 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()，它的确如下所示...容器的全宽减去固定宽度（等于右侧边栏）< / LI>

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

将它放在身体的底部避免需要检查文件是否已加载，你应该对此好。

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

1 个答案: