Scenario 1:
Top header with 100% width and 50px height.
Left navigation bar with 200px width and dynamic height to fill the screen.
body{
padding: 0;
margin: 0;
}
.header{
width: 100%;
height: 50px;
}
.navBar{
position: absolute;
top: 50px;
bottom: 0;
}
Scenario 2:
Top header with 100% width and 50px height.
Left navigation bar with 200px width and dynamic height to fill the screen.
A container on the right of the nav bar and under the header with dynamic width and height to fill the screen.
.container{
position: absolute;
top: 50px;
bottom: 0;
left: 200px;
right: 0;
}
This will work, but I know it is not the best way to implement this. Some suggestions? Many thx!
You have to add height:100% to html and body tag.
Then use calc() css function for height and width properties to get result.
Refer my snippet for both the Scenarios . Its working.
html, body{ height:100%;}
header{ width:100%; height:50px;background:#777;}
.nav{ height: calc( 100% - 50px ); width:200px; float:left; background:#888;}
.container{ color:#fff; float:left; width:calc( 100% - 200px ); height:calc( 100% - 50px ); background:#222;}
<header>HEADER</header>
<div class="nav">NAV</div>
<div class="container">Container</div>
I think this is you want.Just create layout like side menu and container as I created below check the fiddle too. This is an example for your scenario
html, body{
height:100%;
min-height:100%;
}
body{
position:relative;
margin:0px;
}
header{
position:relative;
height:50px;
background:#f00;
}
aside{
position:absolute;
top:50px;
border-right:2px solid #ccc;
left:0;
width:20%;
bottom:0;
padding-top:50px;
height:100%;
backgroud:#f2f2f2;
overflow-y:auto;
overflow-x:hidden;
}
section.container{
margin-left:20%;
position:relative;
width:80%;
float:left;
background:#f5f5f5;
}
HTML like
<header></header>
<aside>sidemenu</aside>
<section class="container">
container
</section>
Related
I have what seems to be a simple css question but having difficulty achieving. I have 2 divs that sit one on top of the other. I would like the combined height of both divs to be 100% but the top to be a static defined height. The bottom div will contain a list of data that will overflow to scroll. What is the best way to achieve this? Below is sample code for something close.
#container{
height:auto;
height:100%;
min-height:100%;
}
#top{
height:175px;
min-height:175px;
max-height:175px;
}
#bottom{
height:70%;
}
<div id="container">
<!-- top div set to 100px -->
<div id="top"></div>
<!-- bottom div dynamic height based on remaining real estate -->
<div id="bottom"></div>
</div>
You could use CSS calc(), so #bottom {height:calc(100% - 175px);}.
html, body {
height:100%;
margin:0;
}
#container {
height:100%;
}
#top {
height:175px;
background:lime;
}
#bottom {
height:calc(100% - 175px);
background:teal;
}
<div id="container">
<div id="top">top</div>
<div id="bottom">bottom</div>
</div>
Or use CSS table layout if you need to support more browsers.
html, body {
height:100%;
margin:0;
}
#container {
height:100%;
width:100%;
display:table;
}
#top, #bottom {
display:table-row;
}
#top {
height:175px;
background:lime;
}
#bottom {
height:100%;
background:teal;
}
<div id="container">
<div id="top">top</div>
<div id="bottom">bottom</div>
</div>
You can use height:calc(100% - 175px); for this:
http://jsfiddle.net/9ygz4pnj/
html,body,#container{
height:100%;
}
#top{
height:175px;
border:1px solid red;
}
#bottom{
height:calc(100% - 175px);
border:1px solid green;
}
You can achieve this by defining a height and min-height on your containers.
First of all you need to define a height: 100% in your body (and html).
Than you need to create a container div which will be the mother of your top and bottom divs.
Than use position: relative and min-height: 100% in your container div.
You can align your top div to top: 0 and left: 0 a definite height and position absolute.
You can align your bottom div to bottom: 0 and left: 0 a calc function and position absolute. For the content scrolling part in bottom div use overflow scroll.
JSFiddle Example
Right now, I am using a french (or german keyboard) which is quite hard for me to use. I will edit the answer with a more meaningful text when I return home.
This is a basic css file that you can use.
html, body { height: 100%; margin:0; }
.container {
position: relative;
min-height: 100%;
}
.top {
background: black;
color: white;
height: 200px;
width: 100%;
position: absolute;
top: 0;
left: 0;
}
.bottom {
position: absolute;
bottom: 0;
left: 0;
background: yellow;
height: calc(100% - 200px);
overflow: scroll;
}
I'm looking for a way to create a div that has a relative size, adjusted to the browser's height. Problem is that I dont really know where to start, or how to do it.
Basically I will have a header, which will be 50px heigh, and the relative div below there. Below that div, theres another div that HAS to be 50px inside the screen (Without scrolling). More content of that div, or another div (I dont mind which one) will be outside the screen.
So if the browser is 1000px heigh, 100px will be spend for the top and bottom divs. That means the relative div must be 900px heigh.
To support the idea I have made a simple image of what I'm willing to achieve: (Yeah, paint skills, got no Photoshop at my current location)
The orange border would represent the size of the complete page.
I know this is pretty easy to do with JavaScript, that wouldn't be a challenge for me, but I'm trying to find a CSS-only solution if possible. Any ideas?
An idea, using % instead of px for header and footer : here
<div id='header'></div>
<div id='content'>
<div id='scrollable'>this is my content</div>
</div>
<div id='footer'></div>
And CSS
body {
height:100%;
}
#header {
width:100%;
height:15%;
position:absolute;
top:0;
background:red;
margin:0;
}
#footer {
width:100%;
height:15%;
position:absolute;
bottom:0;
background:blue;
}
#content {
position:absolute;
width:100%;
top:15%;
height : 70%;
background:yellow;
overflow-y:auto;
}
#content #scrollable {
min-height:100%;
}
So I think this is what you want
<div id="scrn">
<div id="top"></div>
<div id="bottom"></div>
</div>
Then some CSS
#scrn {
height: 1700px;
width: 100%;
position: relative;
}
#top {
height: 50px;
width: 100%;
position: fixed:
top: 0px;
}
#bottom{
height: 50px;
width: 100%;
position: fixed;
bottom: 0px;
}
This looks right I think? Also I put the position: relative and height in because I am not 100% sure what you are trying to achieve with it.
Ok! Here's a technique I've used a bunch- this will work best if you don't fix the height of your relative positioned div. Based on your description, this is not the intent so it should work fine.
Basic Markup:
<body>
<header>DIV 1 - 50PX</header>
<div class="main">MAIN STUFF - RELATIVE</div>
<footer>DIV 2 - 50PX</footer>
</body>
CSS:
body, html{
width:100%;
height:100%;
}
body{
margin:0;
positino:relative;
}
header{
position:absolute;
width:100%;
height:50px;
top:0;
left:0;
background:#666666;
color:#ffffff;
z-index:10;
}
footer{
position:absolute;
width:100%;
height:50px;
bottom:0;
left:0;
background:#555555;
color:#ffffff;
z-index:10;
}
.main{
position:relative;
box-sizing:border-box;
padding:50px 1em;
height:150%; /* this is to simulate your dynamic content */
background:#cccccc;
}
http://jsfiddle.net/xdeQ6/1/
Adding padding to the main content div will make sure that your actual content at the top and bottom of your page is not hidden behind the header and footer divs.
Here is my approach:
header, footer {
background: #f00;
position: fixed;
width: 100%;
height: 50px;
left: 0;
}
header {
top: 0;
}
footer {
bottom: 0;
}
#content {
margin: 50px 0;
}
See my fiddle: http://jsfiddle.net/Vw97D/1/
Does it meet your expectations?
This question already has answers here:
Setting width/height as percentage minus pixels
(11 answers)
Closed 9 years ago.
I have a parent div and 2 divs inside it. First child div is 50px wide and 100% height. Second child div is 100% height and I it to take rest of the width ( 100% - 50px ) how do I do that?
Here is the fiddle that I've created: http://jsfiddle.net/muGty/
Basically I want blue div (right ) to occupy rest of the grey container completely.
<div class="parent">
<div class="left"></div>
<div class="right"></div>
</div>
Do you mean like this?
<div id="left">
</div>
<div id="right">
</div>
CSS
html, body {
height: 100%;
}
#left {
width:200px;
float:left;
background: #f00;
height: 100%;
}
#right {
margin-left: 200px;
background: #0f0;
height: 100%;
}
Update:
You can also use calc() property in CSS3, which will ease up this process like
html, body {
height: 100%;
}
#left {
width:200px;
float:left;
background: #f00;
height: 100%;
}
#right {
float: left;
background: #0f0;
height: 100%;
width: calc(100% - 200px); /* Negate the fixed width element value from 100% */
}
Demo 2
Just change your right div to this:
.right{
float:left;
height:50px;
width: calc(100% - 50px);
background-color: blue;
display:inline-block;
}
You could add a 50px margin to right and float it.
What about editing your right class to make it look like this :
.right{
float:left;
height:50px;
width: 100%;
margin-right:-50px;
background-color: blue;
display:inline-block;
}
You could also work with an absolute position for the right side column. Consider this example:
.parent{
width:100%;
height:50px;
background:#888;
position:relative
}
.left{
float:left;
height:100%;
width:50px;
background:green
}
.right{
background:red;
position:absolute;
bottom:0;
left:50px;
right:0;
top:0
}
Also see this Fiddle. Note that you would need to set position: relative on the parent container for this to fly.
I want to build a page where my content is centered but responsive - it should be of a maximum width of 960 pixels but diminish if the window size diminishes.
At the same time, I want to have the background of this page in different colors on its left and right margins.
How can I achieve that?
If I use margin:0 auto on my main div, I can't control the background any longer.
For the content you will have
<div id="page">
<div id="content"></div>
</div>
if you put in your css file
page {
width: 100%;
background: #333; }
content {
width: 100%;
max-width: 960px;
margin-left: auto;
margin-right: auto; }
for the background color you can try some trick like this (these will apply to content)
border-right: 10px solid #blue;
border-left: 10px solid #white;
Just make it have a max-width and a percent width, with margin auto on both sides.
If you want to have a multicolor body background you can position two boxes on the background and give each a different colour. Now position those on the background with a negative z-index for example, so that the rest stays on the viewport. Here, I made it for you:
Source: http://jsfiddle.net/p8ZNz/4/
View fullscreen: http://jsfiddle.net/p8ZNz/4/embedded/result/
CSS:
#left{
width:50%;
height:100px;
position:absolute;
top:0;
left:0;
background-color:red;
z-index:-1;
}
#right{
width:50%;
height:100px;
position:absolute;
top:0;
left:50%;
background-color:blue;
z-index:-1;
}
#content{
position:relative;
width:90%;
height:100px;
max-width:960px;
margin:0px auto;
background-color:green;
color:#FFF;
}
The background will remain 50%-50% for all widths, and the centered box will grew up if you resize the window, till it reaches 960px wide. if you want the background be complete, just give it a 100% height!
http://jsfiddle.net/iambriansreed/Sw9ae/
HTML
<div class="left"></div>
<div class="right"></div>
<div class="centered">centered</div>
CSS
.left,.right {
position: absolute;
width: 100px;
top: 0;
bottom: 0;
}
.left {
left: 0;
background: blue;
}
.right {
right: 0;
background: red;
}
.centered {
position: relative;
margin: 0 auto;
max-width: 400px;
background: #ccc;
}
I have a two column layout:
<html>
<head></head>
<body>
<div id="container">
<div id="header"></div>
<div id="sidewrapper"></div>
<div id="contentwrapper"></div>
</div>
</body>
</html>
I want to have both sidebar and content be 100% in height but the most top container's min-height should be 100%.
I tried to solve it with the following css:
* {
margin: 0;
padding: 0;
}
html {
font-family: Georgia, serif;
color: #000; height:100%; min-height:100px;
}
body {
background: #fff; height:100%; min-height:100px; overflow:hidden;
}
#header {
width: 100%;
position: relative;
float: left;
height: 23px;
}
#container {
position:relative;
width: 100%; height:100%;
margin: auto; background:blue;
}
#contentwrapper {
float:left;
background:red;
position: relative;
width: 700px; padding:0px; margin:0px;
height: auto;
}
#sidewrapper {
float:left;
position: relative;
width: 159px; height:100%;
padding:0px; margin:0px;
}
...but I get a scrollbar because of the header's 23px height. I tried to solve it with overflow:hidden for the body element but I do not know if that is the right solution.
Any ideas?
If my assumption I put forward in my comment to the question is right, then sidebar is 100% high, and on top of that you have a 23px header, so that causs your container to be 100% + 23px high.
In the future you will have in css calc() http://hacks.mozilla.org/2010/06/css3-calc/ . This will solve your problem.
Now, I guess you should calculate the height of the sidebar ( = height of container - 23px), by javascript.
Make #header position absolute. This will cut that block out of the normal flow and you'll be able to make heights of other blocks equal to their parent.
#header {
position: absolute;
width: 100%; height: 23px;
top: 0; left: 0;
}
#sidewrapper,
#contentwrapper {
float: left;
width: 50%;
height: 100%;
}
#sidewrapper .content,
#contentwrapper .content {
margin-top: 23px;
}
The height of an element is compared with its father element. In your case, I recommend you specify the concrete width & height for "containter", because it'll be hard to pretend the size of the screen on many machines.
If you insists use percent, I recommend you use for both element, such as header 25% height and content 75% height.
Lets say I've a html body and a div inside and I want to make the height of the div to the entire browser without scroll bar and side gaps. Then understand the following example below, and implement your own.
Html:
<body>
<div id="yellowDiv">
<div>
</body>
CSS:
body{
margin:0px;
}
yellowDiv{
background-color:yellow;
height:100vh;
}