I'm trying to set up a simple layout for my homepage.
This is how I want it to look like:
Unfortunately, I've difficulties specifying the size for the main div. I want it to expand dynamically, both the height and the width. So it should "fill" the rest of the content, not filled by menu and footer.
HTML:
<body>
<div class="container">
<div class="nav">
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</div>
<div class="main">
Text...
</div>
<div class="footer">
Footer
</div>
</div>
</body>
CSS:
.nav, .content{
display: inline-block;
vertical-align: top;
}
.nav{
width: 200px;
background-color: #ccc;
}
.main{
height: 100%; /* something like 100% - 50px (height of footer) */
width: 100%; /* something like 100% - 200px (width of menu) */
overflow: hidden;
background-color: #aabbcc;
}
.footer{
background-color: #ff9999
}
You can find an example here: http://jsfiddle.net/48q5f4u9/3/
First at all reset:
* {margin:0;padding:0}
After use 100% on body, html tags and main container .container:
html,body, .container {
height:100%;
}
Then use calc() to set the dimensions, like:
.main{
height: calc(100% - 50px);
width: calc(100% - 200px);
overflow: hidden;
background-color: #aabbcc;
}
DemoFiddle
.nav{
width: 200px;
float: left;
background-color: #ccc;
}
Link to Fiddle
This is one simple way to make content dynamic , setting float to sidebar.
but i think you need to make more changes , set footer at bottom ( footer will be always at the end of the page ) and by this way you can make things look more attractive.
Hope this helps, let me know ;)
You can used sticky footer and absolute and border-box for main and nav and play with padding because they have a defined size:
* {
padding: 0;
margin: 0;
}
html, body {
height: 100%;
}
.main, .nav {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.container {
min-height: 100%;
margin-bottom: -50px;
overflow: hidden;
}
.nav {
position: absolute;
left: 0;
padding-bottom: 50px;
top: 0;
width:200px;
height: 100%;
background: #1abc9c;
z-index: 1;
}
.main {
top: 0;
width: 100%;
height: 100%;
padding: 0 0 50px 200px;
background: #3498db;
height: 100%;
position: absolute;
left: 0;
}
.container:after {
content: "";
display: block;
}
.footer, .container:after {
height: 50px;
}
.footer {
position: relative;
background-color: #e74c3c;
z-index: 2;
width: 100%;
}
<div class="container">
<div class="nav">
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</div>
<div class="main">
Text...
</div>
</div>
<div class="footer">
Footer
</div>
Related
I'm trying to build a responsive header component for a site. The header has position: fixed so that it doesn't scroll, but contains a horizontally scrolling list of options.
I used this tutorial to build the horizontally-scrolling internals so that the list of header items could be scrolled but no scrollbar would be displayed. Check out the code below, and see it working in this fiddle.
HTML
<body>
<main class="fixed-container">
<div class="scroll-container">
<ul class="scroll-list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</main>
</body>
CSS
.fixed-container {
position: fixed;
height: 75px;
overflow: hidden;
right: 0;
left: 0;
border-bottom: 2px solid black;
}
.scroll-container {
height: 100%;
overflow-x: auto;
overflow-y: hidden;
box-sizing: content-box;
padding-bottom: 17px;
}
.scroll-list {
list-style: none;
display: flex;
height: 100%;
width: 1000px;
margin: 0;
padding-left: 0;
}
.scroll-list li {
flex: 1 0;
text-align: center;
padding-top: 2em;
border-bottom: 2px solid red;
margin-left: 5px;
margin-right: 5px;
}
<div class="scroll-container">, with height: 100%, fills the height of the <main class="fixed-container"> as expected. However the <ul> within the div, which also has height: 100%, does not fill the height of its parent. There is space between the red borders at the bottom of the <li>s within and the black border at the bottom of the <main class="fixed-container">.
Note that if overflow-x: auto and overflow-y: hidden are removed from <div class="scroll-container">, or if right: 0 is removed from <main class="fixed-container"> then the heights behave as expected and the red borders are flush with the top of the black border.
How can I get the <ul> to fit the height of its parent so that the red borders sit directly on top of the black border?
You can achieve the desired effect by changing the .scroll-container rule like this, where instead of setting a bottom padding, you increase its height
.scroll-container {
height: calc(100% + 17px);
overflow-x: auto;
overflow-y: hidden;
}
.fixed-container {
position: fixed;
height: 75px;
overflow: hidden;
right: 0;
left: 0;
border-bottom: 2px solid black;
}
.scroll-container {
height: calc(100% + 17px);
overflow-x: auto;
overflow-y: hidden;
}
.scroll-list {
list-style: none;
display: flex;
height: 100%;
width: 1000px;
margin: 0;
padding-left: 0;
}
.scroll-list li {
flex: 1 0;
text-align: center;
padding-top: 2em;
border-bottom: 2px solid red;
margin-left: 5px;
margin-right: 5px;
}
<main class="fixed-container">
<div class="scroll-container">
<ul class="scroll-list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</main>
I've made a research before posting but I can't find anything to solve the problem.
I'm making a menu on my website, it has a width of 100% and inside the menu, I put 3 differents div.
Managed to make them take 100% of the width
.clear {
clear: both;
}
.menu {
position: relative;
height: 20%;
text-align: center;
}
.menu:after {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
background-image: url("images/triangles.svg");
width: 100%;
height: 100%;
opacity: 0.1;
z-index: -1;
}
.menu li {
float: left;
list-style: none;
margin-right: 5%;
}
.left,
.center,
.right {
position: absolute;
top: 50%;
transform: translateY(-50%);
background-color: blue;
}
.left,
.right {
width: 30%;
}
.left {
left: 5%;
margin-right: 5%;
}
.right {
right: 5%;
}
.center {
width: 20%;
left: 40%;
}
<div class="menu">
<!--START-->
<div class="left">
<ul>
<li>Element 1
</li>
<li>Element 2
</li>
<li>Element 3
</li>
</ul>
</div>
<div class="center">
<h1>Title</h1>
<h3>Another Title</h3>
</div>
<div class="right">
<ul>
<li>Element 4
</li>
<li>Element 5
</li>
<li>Element 6
</li>
</ul>
</div>
<div class="clear"></div>
</div>
<!--END-->
My menu has an svg background but I don't think it's causing my issue. The problem is that inside .left and .right, the text-align doesn't works, but it does for the .center div.
At the beginning my three div was in float left but as I tought it was the problem, I tried positionning is with absolute positions, but style not working.
I apply a background color to visualise the width of my div and the text is not center at all, obviously a "text-align: right" doesn't work too and I don't understand because .center and .left/.right are basically the same, I can't figure out what's the difference between .center and the other div.
What's wrong in my code?
Because of the following styles
.menu li{float: left; list-style: none; margin-right: 5%;}
There is no space within which for you to see text-align have any effect on the text that you are referencing. This is because when you float those li they slim down to only the space required for their content.
That being so, it is most likely because of the padding and margin in your ul that you feel that text-align is the answer. See the following code
.right ul {margin: 0;padding:0;}
And the effect that it has:
.clear {
clear: both;
}
.menu {
position: relative;
height: 20%;
text-align: center;
}
.menu:after {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
background-image: url("images/triangles.svg");
width: 100%;
height: 100%;
opacity: 0.1;
z-index: -1;
}
.menu li {
float: left;
list-style: none;
margin-right: 5%;
}
.left,
.center,
.right {
position: absolute;
top: 50%;
transform: translateY(-50%);
background-color: blue;
}
.left,
.right {
width: 30%;
text-align: left;
}
.left {
left: 5%;
margin-right: 5%;
}
.right {
right: 5%;
}
.center {
width: 20%;
left: 40%;
}
a {
color: white;
}
.right ul {
margin: 0;
padding: 0;
}
<div class="menu">
<!--START-->
<div class="left">
<ul>
<li>Element 1
</li>
<li>Element 2
</li>
<li>Element 3
</li>
</ul>
</div>
<div class="center">
<h1>Title</h1>
<h3>Another Title</h3>
</div>
<div class="right">
<ul>
<li>Element 4
</li>
<li>Element 5
</li>
<li>Element 6
</li>
</ul>
</div>
<div class="clear"></div>
</div>
<!--END-->
Depending on what exact layout you are trying to achieve, there are a lot of options on how to wield the power that CSS gives you here, but hopefully this is enough of a first step to lead you towards where you were hoping to get.
I made a three column layout for my web app where the two left columns form the menu and submenu and the third column is the main viewport. However, the second column (div) isn't scollable when the main viewport is scrollable even though it does show a scroll bar. What am I doing wrong?
<div id="container">
<div id="top" class="clearfix">
Header
</div>
<div id="container_menu">
<ul id="menu">
<li>Menu goes here</li>
</ul>
</div>
<div id="container_submenu">
<div id="submenu">
Submenu goes here
<strong>WHY WON'T THIS DIV SCROLL? (It is showing a scroll bar...)</strong><br />
FILLER<br />
</div>
</div>
<div id="main">
FILLER<br />
</div>
CSS
* {
margin: 0;
padding: 0;
}
.clearfix:before, .clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
.clearfix {
zoom:1;
/* For IE 6/7 (trigger hasLayout) */
}
body, td, th {
}
body {
background: #fff;
}
div#container {
min-width: 800px;
/*TODO*/
width: 100%;
}
div#top {
width: 100%;
height: 50px;
background: #000;
color: #fff;
position: fixed;
left: 0;
top: 0;
z-index: 5;
}
/* MENU */
div#container_menu {
background: #666;
position: fixed;
left: 0;
top: 0;
width: 180px;
margin-right: -180px;
height: 100%;
}
ul#menu {
margin-top: 50px;
}
/* SUBMENU */
div#container_submenu {
z-index: -1;
background: #ebeef5;
color: #999;
position: fixed;
left: 180px;
top: 0;
width: 250px;
height: 100%;
margin-right: -250px;
height: 100%;
overflow: scroll;
}
div#submenu {
margin-top: 50px;
}
div#main {
margin-left:430px;
margin-top: 50px;
}
JS Fiddle with CSS
Your z-index on div#container_submenu is -1. The div is being put under the #container div (which is transparent) so you can see the #container_submenu div, but not actually target it. Make the z-index of div#container_submenu 0 and it will fix it.
It's occluded by the #main div. Just remove z-index: -1. http://jsfiddle.net/zephod/4xp2jj3a/
I know that there are Questions here that covers parts of my Question but I can´t put them together to make my layout work.
So basically I want a two Column Layout with a fixed Sidebar and dynamic Content fill up the remaining space.
HTML:
<body>
<div id="navbar">
<ul>
<li>Nav 1</li>
<li>Nav 2</li>
<li>Nav 3</li>
</ul>
</div>
<div id="content">
</div>
</body>
CSS:
html, body {
height:100%;
margin: 0;
padding: 0;
border: 0;
}
#content {
height:100%;
float:left;
/*margin: 0 0 0 200px;*/
}
#navbar{
height:100%;
width:200px;
float:left;
}
With this CSS I have the Problem that my content isn´t taking up the remaining Space, and if I remove the float I get a vertical scrollbar because there´s a margin on top!
Any suggestions how I can achieve 100% Height without scrollbar (no overflow hidden because that doesn´t remove the margin on top) and dynamic content width?
thanks in advance
EDIT:
Ironically it works with jsfiddle
http://jsfiddle.net/gXubX/2/
.container {
width: 100%;
background: fuchsia;
}
.left {
width: 200px;
float: left;
background: purple;
min-height: 300px;
}
And a clearfix applied to the container.
Here is a solution that gives you 100% height for both content and the navbar:
fiddle: http://jsfiddle.net/92c6M/
HTML
<div id="navbar">
<ul>
<li>Nav 1</li>
<li>Nav 2</li>
<li>Nav 3</li>
</ul>
</div>
<div id="content">
</div>
CSS
html, body {
height:100%;
margin: 0;
padding: 0;
border: 0;
}
#content {
height:100%;
width: calc(100% - 200px);
display: inline-block;
background-color: #DDF;
}
#navbar{
height:100%;
width:200px;
float: left;
background-color: #CEC;
}
CSS:
#wrapper {
width: 100%;
float: left;
positon: relative;
}
#navbar {
width: 200px;
float: left;
top: 0px;
left: 0px;
position: absolute;
height: 300px;
background-color: red;
z-index: 2;
}
#content-wrapper {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 300px;
float: left;
background-color: blue;
z-index: 1;
}
#content {
left: 200px;
margin-left: 200px;
background-color: green;
z-index: 3;
color: white;
}
HTML
<div id="wrapper">
<div id="navbar"></div>
<div id="content-wrapper">
<div id="content">
asdfasfdasdfasdg asdga sdgasdg asdgasdgasdgasdg
</div>
</div>
</div>
+-------------------+
| Top (fixed) |
+-------------------+
| |
| |
| Middle (fill) |
| |
| |
+-------------------+
| Bottom (fixed) |
+-------------------+
The top and bottom are fixed divs. They are positioned on the top and bottom of browser window. I want the middle part to fill the rest of the window between top and bottom divs.
If it's content is more than its height then i can use scrollbars. But its size should not exceed the window.
My CSS and HTML:
html, body, #main
{
height: 100%;
}
#content
{
background: #F63;
width: 100%;
overflow: auto;
height: 100%;
margin-bottom: -100px;
}
#footer
{
position: fixed;
display: block;
height: 100px;
background: #abcdef;
width: 100%;
}
<div id="main">
<div id="content">xyz</div>
<div id="footer">abc</div>
</div>
From this, the Footer shows in the bottom but, the Content div still fills the whole window which should have been [window-footer] height.
Position the middle div using absolute positioning without specifying height. It does not get much simpler than this:
#header {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 100px;
background-color: #abcdef;
}
#footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 100px;
background-color: #abcdef;
}
#content {
position: fixed;
top: 100px;
bottom: 100px;
left: 0;
right: 0;
background-color: #F63;
overflow: auto;
}
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
Use "Full page" option to view the snippet properly.
If you don't know the header or footer sizes and you can use CSS3 then i would suggest to use flexbox layouting.
Example below (or check fiddle)
HTML:
<div class="container">
<div class="header">header</div>
<div class="content">content</div>
<div class="footer">bottom</div>
</div>
CSS:
.container {
display: flex;
flex-direction: column;
width: 100%;
height: 400px;
}
.header {
flex-grow: 0;
background-color: red;
}
.content {
flex-grow: 1;
background-color: green;
}
.footer {
flex-grow: 0;
background-color: blue;
}
html
<div id="main">
<div id="header"> Header Content</div>
<div id="content">
<ul><li>Hello World!!! </li>
<li>Hello World!!! </li>
<li>Hello World!!! </li>
<li>Hello World!!! </li>
<li>Hello World!!! </li>
</ul>
</div>
<div id="footer">I am Footer
</div>
css
body { margin: 0;}
#main{
position: absolute;
width: 100%;
top: 0;
bottom: 0;}
#header
{
position: absolute;
height: 41px;
top: 0;
left: 0;
right: 0;
text-align:center;
display:block;
background: blue;
}
#content
{
position: absolute;
top: 41px;
bottom: 0;
left: 0;
right: 0;
overflow:scroll;
}
#footer
{
position: absolute;
height: 41px;
bottom: 0;
left: 0;
right: 0;
text-align:center;
display:block;
background: blue;
}
li{
text-decoration: none;
display: block;
height: 20px;
width: 100%;
padding: 20px;
}
JSFIDDLE Demo
I think this is what u want...
JSBin: http://jsbin.com/ebilag/1/
CSS:
html, body {
top: 0;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.top {
position: fixed;
top: 0;
width: 100%;
height: 100px;
background: yellow;
}
.bottom {
position: fixed;
bottom: 0;
width: 100%;
height: 100px;
background: grey;
}
.middle {
padding-top: 100px;
padding-bottom: 100px
}
HTML:
<div class="container">
<div class="top">Top</div>
<div class="middle">Middle</div>
<div class="bottom">Bottom</div>
</div>
If you know the height of the header and the footer...
then you could do this easily with the box-sizing property.
Like so:
FIDDLE1 FIDDLE2
.container
{
height: 100%;
background: pink;
margin: -64px 0;
padding: 64px 0;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.content {
overflow:auto;
height:100%;
}
header
{
height: 64px;
background: purple;
position: relative;
z-index:1;
}
footer
{
height: 64px;
background: gray;
position: relative;
z-index:1;
}
The solution with top and bottom padding is ok but I would suggest a different approach where the main frame is designed as table. This is more flexible and you can hide head or foot without changing the css.
STYLUS (CSS):
html,
body
height: 100%
.container
display: table
height: 100%
.head,
.foot,
.content
display: table-row
box-sizing: border-box
.head,
.foot
height: 70px
background: #ff0000
.content
overflow: auto
.scroll
height: 100%
overflow: auto
box-sizing: border-box
HTML:
<div class="container">
<div class="head">...</div>
<div class="content">
<div class="scroll">...</div>
</div>
<div class="foot">...</div>
</div>
HTML:
<div id="main">
<div id="header">I am Header
</div>
<div id="content">I am the Content
</div>
<div id="footer">I am Footer
</div>
</div>
CSS:
#main{width:100%;height:100%;}
#header
{
position:relative;
text-align:center;
display:block;
background:#abcdef;
height:40px;
width:100%;
}
#content
{
background: #F63;
width:100%;
text-align:center;
height:auto;
min-height:400px;
}
#footer
{
position:relative;
text-align:center;
display:block;
background:#abcdef;
height:40px;
width:100%;
}
DEMO
In my opinion you should use js/jquery to change the #content height during page load.
This should be something like this (I haven't tested code below, so change it as you need):
$().ready(function(){
var fullHeight= function(){
var h=$(window).height()-100; //100 is a footer height
$('#content').css('min-height',h+'px');
};
$(window).resize(fullHeight);
fullHeight();
});
Please try this:
HTML
<div id="header">
header
</div>
<div id="content">
main content
</div>
<div id="footer">
footer
</div>
CSS
html,body{
marign: 0;
padding: 0;
height: 100%;
}
#header {
height: 100px;
position: fixed;
top: 0;
left:0;
right: 0;
background: orange;
}
#footer {
height: 100px;
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: green;
}
#content {
padding-top: 100px;
padding-bottom: 100px;
height: -webkit-calc(100% - 200px);
height: -moz-calc(100% - 200px);
height: -ms-calc(100% - 200px);
height; -o-calc(100% - 200px);
height: calc(100% - 200px);
background: #ccc;
}
please view the demo.