我在调整页面大小时移动 div 时遇到问题。如果您查看 plunker，您会看到一个带有下方框的标题。如果您通过向左拖动滚动条来调整工作区的大小，您将看到页面应该如何显示。我尝试将所有元素包装在一个名为 wrapper 的 div 中，并尝试使用最小宽度进行相对和绝对定位。我也为 body 做了同样的事情。用 Firebug 检查页面后，html 标签应该有大小或定位。那也不起作用(见下文)。我希望能够将我的屏幕最小化到 50% 并最大化到 250% 并保持相同的初始布局，就好像我的屏幕是基于包装的 95%。有任何想法吗？
这是 plnkr
<html>
body, html{margin:0px; padding:0px; width:100%; min-width: 900px; position:relative}
div.wrapper{ width:95%; min-width: 900px; padding-left: 6px; padding-top:5px; position: relative; }
<body>
<div class="wrapper" >
<div id="header">
<img align="left" style="padding-left:10px; padding-top:5px; width: 80px; height: 65px"><h1> Header</h1>
</div>
<div class="left"></div>
<div class="right"></div>
</div> <!--end wrapper -->
</body>
</html>
最佳答案
你可以使用百分比并修复 min-wheight + 将溢出设置为自动(看起来像框架集..实际上不太好)
或者您可以尝试在 box-sizing 上进行中继并在百分比值上使用垂直 padding(它将使用父级的 width 作为引用) .
然后可以使用 float 伪造，这将允许 div 变高而不是显示滚动条。
. {
box-sizing:border-box;
}
.wrapper {
max-width:1300px;
margin:auto; /* ?*/
}
.wrapper #header ~ div {
border:double;
margin:0.4% 0.2%;
padding:5px;
}
#header, .right, .rightbottom {
overflow:hidden;
}
.left {
float:left;
width:30%;
}
.left:before {
content:'';
float:left;
padding-top:204.5%;
}
.right:before, .rightbottom:before {
content:'';
padding-top:30%;
float:left;
}
.wrapper #header ~ div.rightbottom {
border:solid 1px;
}
.rightbottom:before {
padding-top:60%;
}
<div class="wrapper" >
<div id="header">
<img align="left" style="padding-left:10px; padding-top:5px; width: 80px; height: 65px"><h1> Header</h1>
</div>
<div class="left">
</div>
<div class="right" >
<div class="gridStyle" data-ng-grid="gridOptions1">grid</div>
</div>
<div class="rightbottom">right bottom</div>
</div>
http://plnkr.co/edit/K1yOpBOfX3ukqHX7f2oa?p=preview
我不太确定一旦您的网页中有真实内容，您会寻找什么样的行为。
关于css - 如何保持 div 包装器的纵横比？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31660449/