Responsive Fixed Sidebar CSS
Question
What is the best css way to make sidebar fixed to the left and at the same time to make the rest of the site float to right with the full width (minus the sidebar width, 100px just for example).
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Title of the document</title>
</head>
<body>
<div class="sidebar">
Should be fixed, full height, 160px Width.
</div>
<div class="page-wrapper">
Should be full width minus the sidebar width
</div>
</body>
</html>
Thanks.
2 answers
solution1
0 2015-08-11 07:47:12
I've just made an example for you, check this out :
How does it work ?
Define a main div, in which you are going to have your Main Contents and Side Contents located, I've called it Page , and add these CSS properties to it:
.page {
display: table;
direction: rtl;
width: 100%;
line-height: 1.5;
}
Secondly, add your Main Contents CSS properties as below;
.main {
background: #eee;
float: right;
display: table-cell;
direction: ltr;
width: 100%;
vertical-align: top;
padding: 0 1em;
}
And Your Side Contents after :
.sidebar {
background: #ccc;
display: table-cell;
direction: ltr;
width: 12em;
vertical-align: top;
padding: 0 1em;
}
Having your main div display set to table , you are letting elements behave like a table element, so later on you can call on your sub-divs , and by adding display table-cell , you are letting the element behave like a <td> element, define a particular width for you cells, and have your them allocated next to each other.
solution2
0 ACCPTED 2015-08-11 07:54:45
flexbox can do that.
* { margin: 0; padding: 0; } html { height: 100%; } body { min-height: 100%; display: flex; } .sidebar { flex: 0 0 160px; background: lightblue; } .page-wrapper { flex: 1 1 auto; background: orange; }
<div class="sidebar"> <p>Should be fixed, full height, 160px Width.</p> </div> <div class="page-wrapper"> <p>Should be full width minus the sidebar width</p> </div>
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.