如何维护div包装器的宽高比?

时间:2015-07-27 18:21:22

标签: html css html5

我在调整页面大小时移动div时遇到问题。如果你看看这个plunker,你会看到一个带有方框的Header。如果通过向左拖动滚动条来调整工作区的大小,您将看到页面应该如何。我尝试将所有项目包装在一个名为wrapper的div中,并尝试使用min-width进行相对和绝对定位。我也为身体做了同样的事情。用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>

2 个答案:

答案 0 :(得分:1)

你可以使用百分比并修复min-wheight + set overflow to auto(看起来像frameset ..实际上并不那么好)

或者您可以尝试转发[error] /home/me/projects/my-project/src/main/scala/com/org/project/MyElasticsearchCode.scala:123: polymorphic expression cannot be instantiated to expected type; [error] found : [V]()V [error] required: Long [error] Try[Long](hit.field("system.innerField").getValue) match { [error] ^ [error] one error found [error] (project/compile:compileIncremental) Compilation failed [error] Total time: 4 s, completed Jul 27, 2015 4:16:41 PM 并在百分比值上使用垂直box-sizing(它将使用父padding作为参考。

然后可以使用

浮动伪,并允许div变得更高而不是显示滚动条。

&#13;
&#13;
width
&#13;
. {
    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%;
}
&#13;
&#13;
&#13;

http://plnkr.co/edit/K1yOpBOfX3ukqHX7f2oa?p=preview

我不太确定一旦你网页上有真实内容,你会寻找什么样的行为。

答案 1 :(得分:0)

如果你想让标题和两个div总是有自己的行,也许你可以在设置为width: 100%的div中包含它们?