Question

我正在尝试将网站放在一起，并在所有页面上都有一个“内容”区域，这样我就可以拥有所有其他页面的模板。我有它设置，除了新的divs我没有正确调整到主窗口，它看起来不错，直到我最小化窗口然后div（菜单和动作div）然后他们不用它调整大小。我想弄清楚菜单和动作div。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
 "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Centered Scalable Layout using &lt;div&gt;'s</title>
<style type="text/css">
html {
    height: 100%;
}
body {
    margin: 0;
    height: 100%;
    background: #999999;
}
#wrapper {
    position: relative;
    width: 95%;
    margin: 0 auto 0 auto;
    min-height: 100%;
    background: #FBFBFF;
    color: #000033;
}
#header {
    height: 6em;
    background: #000059;
    color: #F2F2FF;
}
#content {
    width:100%;
    height:900px;
    position:relative;
}
#action{
    position:absolute;
    top: 500px;
    left: 25%;
    height: 300px;
    width: 600px;
    border: 5px solid #000;
}
#menu{
    position:absolute;
    left: 25px;
    height: 15px;
    width: 500px;
}
#footer {
    position: absolute;
    bottom: 0;
    height: 4em;
    width: 100%;
    background: #80A7E0;
    color: #000033;
}

</style>
<!--[if IE 6]>
<style type="text/css">
#wrapper {
height: 100%;
}
</style>
<![endif]-->
</head>
<body>
<div id="wrapper">
  <div id="header"> Header area</div>
  <div id="content"> 
    <p>Some text in the content area.  </p>

    <div id="menu"> menu area</div>
    <div id="action">action area</div>
  </div>
  <!--end content div -->

  <div id="footer">Footer area</div>
</div><!--end wrapper -->
</body>
</html>

Answer 1

很难准确地解释你想要的东西。

根据我的理解，您想要一个灵活的设计，元素会根据浏览器窗口调整大小？

看看这个JSfiddle：http://jsfiddle.net/q62AM/1/

* 感谢@Jared Farrish为每个人提供jsfiddle。

基本上，通过灵活的设计，您需要使用灵活的增量，例如百分比。如果您不希望您的设计压得太小，可以设置min-width，但您应该考虑在父容器上设置min-width。

有关构建响应式和流畅布局的更多信息，请查看以下优秀文章：

A List Apart - 流体网格： http://www.alistapart.com/articles/fluidgrids/

粉碎杂志 - 响应网页设计： http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/

如何放置div以使其与父窗口一起调整？

1 个答案: