fixed divs to fluid divs
Question
I'm trying to create a page where the header is 100% wide and takes up 20% of height in a screen with the left navbar (20% width) and a main body adjacent (80% width). I'm trying also to make the page fluid so it maintains it's ratio on different sized screens.
html
<!doctype html>
<html lang="en">
<head>
<title>Test</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="header">
</div>
<div class="left">
</div>
<div class="main">
</div>
</body>
</html>
css (with fixed properties commented out)
#header{
height:20%;
width:100%;
background-color: #3B3738;
/*min-height:80px;
min-width: 100%;*/
}
#left{
height:80%;
width:20%;
background-color: #848484;
/*min-height:550px;
min-width:20%;
position: relative;
float:left;*/
}
#main{
height:80%;
width:80%;
background-color: #FDF3E7;
/*min-height:550px;
min-width:80%;
position: relative;
float:left;*/
}
How can I make it so the layout is responsive?
2 answers
solution1
0 ACCPTED 2015-04-07 20:42:04
I don't know exactly what your use case is but have you thought about using something like Twitter Bootstrap for this?
There are classes and CSS already written for doing just what it is you're asking. Here is a link to the documentation that explains how the grid system works.
http://getbootstrap.com/css/#grid
I hope that is useful for you.
solution2
0 2015-04-09 18:33:57
Just to let you know I solved my problem by using vh and vw in my css instead of % or px. A clean and simple solution which suits the purpose of my exercise.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.