Question

我在调整页面大小时移动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>

Answer 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;

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;

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

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

Answer 2

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

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

2 个答案: