How to place div so that it sizes with parent window?
I am trying to put a website together and have a "content" area on all the pages so that i can have a template for all the other pages. I have it set up except that the new divs i place dont resize properly to the main window, it looks good until i minimize the window then the div (menu and action divs) then they dont resize with it. I am trying to figure out the menu and action divs.
<!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 <div>'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><!--e开发者_运维知识库nd wrapper -->
</body>
</html>
It's kind of hard to interpret what you are wanting exactly.
From what I understand, you are wanting a flexible design that elements will resize depending on the browser window?
Take a look at this JSfiddle: http://jsfiddle.net/q62AM/1/
*Thanks to @Jared Farrish for putting together the jsfiddle for everyone to play with.
Basically, with flexible designs you need to use flexible increments such as percentages. You can set min-widths if you don't wish for your design to squash too small but you should consider setting the min-width on the parent container.
Check out the following excellent articles for further information on building responsive and fluid layouts:
A List Apart - Fluid Grids: http://www.alistapart.com/articles/fluidgrids/
Smashing Magazine - Responsive Web Desing: http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
加载中,请稍侯......
精彩评论