Height dependent on screen size
I am using HTML5/CSS3 and what I am trying to do is create a page that scrolls if needed or is all on one section of the screen if there is less data. At the moment I have not used a wrapper due to googling I was told that you could use body -> works fine. As you see in my CSS I have set my html,body to 100% and then on viewing the code it scrolls.
How could I make this screen size dependent?
html,body{
margin:0 auto;
width:960px;
height:100%;
}
header{
width:100%;
border-bottom:1px solid red;
}
header #logo{
}
header nav{
float:left;
border:1px solid red;
width:100%;
margin:0 0 5px 0;
}
header nav ul li{
float:right;
height:40px;
margin:0 0 0 15px;
list-style-type: none;
}
header ul li a{
color:#000;
font-size:14px;
text-decoration: none;
}
#content{
float:left;
width:700px;
min-height:100%;
border:1px solid red;
}
#sidebar{
开发者_高级运维 float:right;
width:250px;
min-height:100%;
border:1px solid green;
}
footer{
clear: both;
width:100%;
height:40px;
}
Template Layout 2011 </script>
<div id="logo">
<h1>Template Logo 2011</h1>
</div><!--logo end -->
<nav>
<ul>
<li><a href="#">Page One</a></li>
<li><a href="#">Page Two</a></li>
<li><a href="#">Page Three</a></li>
<li><a href="#">Page Four</a></li>
<li><a href="#">Page Five</a></li>
</ul>
</nav>
</header>
<section id="content">
<h1>Content Introduction</h1>
<p>Content</p>
</section>
<aside id="sidebar">
<article id="box_one">
<h2>Box One</h2>
<p>Box Content</p>
</article>
<article id="box_two">
<h2>Box Two</h2>
<p>Box Content</p>
</article>
<article id="box_three">
<h2>Box One</h2>
<p>Box Content</p>
</article>
</aside>
<footer>
<p>Footer content</p>
</footer>
This is for CSS3. The main key is the display: table; display: table-cells; used together gives you the matched height you are looking for without the divs or asides etc. being actual table cells.
<!Doctype HTML>
<html>
<Head>
<style type="text/css">
html,body{
margin:0 auto;
width:960px;
}
header{
width:100%;
border-bottom:1px solid red;
}
header #logo{
}
header nav{
float:left;
border:1px solid red;
width:100%;
margin:0 0 5px 0;
}
header nav ul li{
float:right;
height:40px;
margin:0 0 0 15px;
list-style-type: none;
}
header ul li a{
color:#000;
font-size:14px;
text-decoration: none;
}
#wrapper{
display: table;
width: 960px;
border: 1px solid blue;
}
#content{
display: table-cell;
width:700px;
border:1px solid red;
min-height: 250px;
}
#sidebar{
display: table-cell;
width:250px;
border:1px solid green;
}
footer{
clear: both;
width:100%;
height:40px;
}
</style>
</head>
<body>
<div id="logo">
<h1>Template Logo 2011</h1>
</div><!--logo end -->
<nav>
<ul>
<li><a href="#">Page One</a></li>
<li><a href="#">Page Two</a></li>
<li><a href="#">Page Three</a></li>
<li><a href="#">Page Four</a></li>
<li><a href="#">Page Five</a></li>
</ul>
</nav>
<div id="wrapper">
<div id="content">
<h1>Content Introduction</h1>
<p>Content</p>
</div>
<div id="sidebar">
<article id="box_one">
<h2>Box One</h2>
<p>Box Content</p>
</article>
<article id="box_two">
<h2>Box Two</h2>
<p>Box Content</p>
</article>
<article id="box_three">
<h2>Box One</h2>
<p>Box Content</p>
</article>
</div>
</div>
<footer>
<p>Footer content</p>
</footer>
</body>
</html>
加载中,请稍侯......
精彩评论