如何放置div，使其与父窗口的大小？

-1

我试图把网站放在一起，并在所有页面上都有一个“内容”区域，这样我就可以为所有其他页面创建一个模板。除了我放置的新divs不会正确地调整到主窗口，它看起来不错，直到我最小化窗口然后div（菜单和动作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>

来源

2011-06-28 BiggMann

我不明白你想要完成什么。 –

http://jsfiddle.net/q62AM/ –

你想让@menu和#action div做什么？ – NGLN

这是很难解释你想要的东西。

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

在此的jsfiddle看看：http://jsfiddle.net/q62AM/1/

* 感谢@Jared Farrish的放在一起的的jsfiddle大家一起玩。

基本上，通过灵活的设计，您需要使用灵活的增量，例如百分比。如果你不希望你的设计挤压太小，你可以设置min-width，但你应该考虑在父容器上设置min-width。http://www.alistapart.com/articles/fluidgrids/

碎杂志 - 自适应网页德兴：http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/

- 流体网格

列表除了：了解更多信息构建反应灵敏，流体布局

看看下面的优秀文章

来源

2011-06-28 02:08:50 Dan

如何放置div，使其与父窗口的大小？

回答

相关问题