i have a mind bobbling question.
I need a 100% width, 100% height container with 20px margin that expands with content. Is this at all possible? The closest i got was with this method:
#container {
position:absolute;
top:0;
bottom:0px;
left:0;
right:0;
margin:20px;
}
but then it wont expand in height with content.
Anybody know the divine technique for this?
I'm pretty sure it isn't possible to do with a single element, but if you don't mind having 3 spacer div elements, this solution works in all browsers:
<html>
<head>
<style type="text/css">
* {
margin: 0;
}
html, body {
height: 100%; padding: 0; /* padding 0 is for jsfiddle */
}
#wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin-left: 20px;
margin-right: 20px;
margin-bottom: -20px; /* the bottom margin is the negative value of the spacer height */
background-color: #ccc;
}
.spacer.edge {
background-color: white; /* same as body background */
}
.spacer {
height: 20px;
}
</style>
</head>
<body>
<div id="wrapper">
<div class="spacer edge"></div>
<!-- content here -->
<div class="spacer"></div>
</div>
<div class="spacer edge"></div>
</body>
</html>
Here's a fiddle to play with: http://jsfiddle.net/dTyTW/
I you want to expand the div with the content , then you need to set position : relative and in order to stick towards the bottom padding-bottom also need to be set.
#container {
position:relative;
top:20px;
bottom:20px;
left:20px;
right:20px;
padding-bottom: 80%;
border:1px solid red;
}
Values can be adjusted as per the requirement.
Try here
Remove the margin and give each position a 20px.
Also remove the bottom.
Add padding-bottom:20px;
#container {
position:absolute;
top:20px;
left:20px;
right:20px;
padding-bottom:20px;
}
http://jsfiddle.net/jasongennaro/w7dQP/3/
EDIT
If you are not opposed to using some jQuery, you could also do this
var h = $(document).height();
var h2 = $('#container').height();
if(h2 < h){
$('#container').height(h);
}
This ensures that if the div is smaller than the browser viewport, it will expand to fit it.
Once the text is as big or bigger, the styles will take care of it.
http://jsfiddle.net/jasongennaro/w7dQP/8/
<html>
<style>
body
{
margin:0px;
}
div
{
position: absolute;
padding: 20px;
}
img
{
position: relative;
width: 100%;
}
</style>
<body>
<div>
<img src="http://manual.businesstool.dk/screen.jpg" />
</div>
</body>
</html>
Use the padding property... look up the box model.
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;
}
HTML code:
<div id="container>
<div id="wrapper">Some text
</div>
</div>
CSS code:
div {
position:fixed;
display:block;
}
#container {
max-width:1500px;
height:10%;
}
#wrapper {
width:50%;
height:10%;
}
Now, my wrapper and container have the same size, although you would expect that the wrapper is half the height of the container, and one tenth the height of the container. Unfortunately, they are evenly big right now. Can someone please help me out?
You need to change max-width to width on #container to get the width right:
#container {
width: 1500px;
height: 10%;
}
And you need to remove position: fixed and set height on html, body to get the percent height to work:
html, body {
height: 100%;
}
div {
position: fixed;
display: block;
}
JSFiddle
(You're also missing an ending " in the container div, but I assumed that was a typo)
#container {
display:block;
position:fixed;
width:100%;
height:10%;
background-color: blue;
}
#wrapper {
display:block;
position:relative;
width:50%;
height:100%;
background-color: red;
}
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?
I am trying to design a web page which is divided into 3 regions:-
1) a header region
2) a left navigation pane
3) The main content area
For this, I am presently using the following CSS classes:-
.Content
{
position:absolute;
overflow:auto;
top:10%;
left:20%;
width:80%;
height:90%;
}
.Header
{
position:absolute;
left:0;
top:0;
height:10%;
width:100%;
background-color:Blue;
text-align:center;
}
.NavPanel
{
position:absolute;
top:10%;
left:0;
height:90%;
width:20%;
overflow:auto;
background-color:Menu;
}
The height and width of body tag are set to 100%.
I dont think this is a very good way of doing what I want to do. For example, when I reduce the height of the browser, the header area reduces proportionally, ultimately vanishing. Also, the page is rendered as expected by Chrome, but for some reason, horizontal scroll bar appears in IE8.
I dont have great knowledge in HTML and CSS, so I just wanted to know if there is any better way of doing this. Thanks!
You may want to specify an absolute height for the header, e.g.:
.Header
{
position:absolute;
left:0;
top:0;
height:100px;
width:100%;
background-color:Blue;
text-align:center;
}
You can also specify the header in measures of the font size: height: 10em (1 em should be the width of the letter "m"; 1 ex would be the height of the letter "x").
Note that it might be better to remove the "position" attributes both for the header and the content. In this case, positioning would be relative (the default), making the content appear below the header regardless of the size of the header. In that case, remove the "height" attribute for the content.
You could try setting a min-height on the header and using media queries.
For example, you could set min-height: 2em; and use a media-query like:
#media (max-height: 20em) { /* the min-height for the header = 10% of the max-height used here */
.content, .navPanel {
top: 2em; bottom: 0;
}
}
DEMO
However, media queries don't work in IE 8 or older.
Hi i think you are looking for page layout like this copy and paste this code into any notepad and check it out.
<html>
<head>
<style type="text/css">
.Container
{
background-color:yellow;
height:100%;
weight:100%;
}
.inner
{
float:left;
top:10%;
height:90%;
width:100%
}
.Content
{
float:left;
top:10%;
left:20%;
width:80%;
height:100%;
background-color:skyblue;
}
.Header
{
float:left;
height:10%;
width:100%;
background-color:Blue;
text-align:center;
}
.NavPanel
{
float:left;
top:10%;
height:100%;
width:20%;
background-color:Menu;
}
</style>
</head>
<body>
<div class="Container">
<div class="Header"></div>
<div class="inner">
<div class="NavPanel"></div>
<div class="Content"></div>
</div>
</div>
</div>
</body>
</html>
Here's a basic layout that you can use and expand upon:
http://jsfiddle.net/yUCdb/
You may try;
HTML
<div id="container">
<div id="header">
</div>
<div id="sidebar">
</div>
<div id="viewer"></div>
</div>
CSS
html, body {
margin: 0;
padding: 0;
border: 0;
}
#header, #sidebar, #viewer {
position: absolute;
}
#header{
top: 0;
width: 100%;
height: 10%;
background: yellow
}
#sidebar {
top: 10%;
width: 20%;
bottom: 0;
background-color: red;
z-index:100;
}
#viewer {
top: 10%;
left: 20%;
right: 0;
bottom: 0;
background-color: green;
}
Here is a live demo.
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;
}