HTML/CSS Div在浏览器调整大小时移动
HTML/CSS Div在浏览器调整大小时移动
提问于 2014-12-14 15:26:20
我有两个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;
}回答 1
Stack Overflow用户
回答已采纳
发布于 2014-12-14 15:38:34
因此，只要您能够处理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()，它所做的与它看起来的完全一样.容器的全宽度减去固定宽度(等于右侧边栏)
下面是一个显示工作模型的jsFiddle。
后备
最酷的是，display:inline-block;可以返回到IE8，所以您唯一关心的是设置宽度。
如果您使用的是一个特性检测库，如现代派 (如果不是，您应该使用)，那么您可以将CSS和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，您可以使用它的语法，只是试图成为库无关者。如果您没有使用现代化，您可以将其放在正文底部的条件注释中：
<!--[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]-->将其放在正文的底部，避免需要检查文档是否已加载，您应该对此很在行。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/27470781
复制相关文章
相似问题
腾讯云开发者
