So. My code is something along the lines of
<html>
<body>
<div id="header" style="width:100%;min-height:0;display:block;background-color:#000">
<img src="header_image.svg" />
</div>
<div id="content" style"display:block">
Some content
</div>
</body>
</html>
I have an svg in the header that I have set so that it matches the width of the window and the height scales to preserve the svg. Then I have the rest of the page in another div. I would like it so that the page doesn't scroll and this content div fills to fit the rest of the window. The problem is that since the height of the header changes with the width of the window, I can't set the content div in pixels or percentage or anything concrete.
How can I set the height of the content div to change dynamically with the height of the header?
I don't know Javascript or JQuery (I know, I know - I should), but ideally the height of the content div would be set to be something like height:(height of viewport)-(height of header), but I haven't a clue how to do this.
you don't have to use a script for that.
and also: I recommend you to separate your styling from your markup.
HTML
<div id="wrapper">
<div id="header">
<img src="header_image.svg" alt="the img is empty"/>
</div>
<div id="content">Some content</div>
</div>
add this to your CSS
html, body {
height: 100%;
margin: 0px;
}
/* this is the big trick*/
#wrapper:before {
content:'';
float: left;
height: 100%;
}
#wrapper {
height: 100%;
background-color: black;
color: white;
}
#header {
background-color:#000;
}
#content {
background-color: gray;
}
/* this is the big trick*/
#content:after {
content:'';
display: block;
clear: both;
}
Working Fiddle
Tested on: IE10, IE9, IE8, FF, Chrome.
didn't use absolute positioning
didn't use Script (Pure CSS solution)
fluid layout
cross-browser
Explanation:
with pseudo element, I'm creating a floating element (without content or width, so he's invisible)
that has 100% of the container height.
and with another pseudo element I'm creating a div just after the content div. (also without content, so he's also invisible) that has the clear attribute. so he has to be below the floated one I've created earlier. making the content to go all the way down.
Related
I have a page with content contained in <html></html> - I'm trying to get a sidebar to span all the way down to the bottom of the page, even if there's vertical overflow.
This is working if there's no vertical overflow, but if there is, the sidebar just stops at wherever the bottom of the page was when the page loaded.
If I use chrome dev tools, I can see that all elements - all the way up to <html>, have their height limited to however big the window was when it loaded. Is this normal? My problem would be solved if I could tell <html> to somehow span vertically to include all content, but I don't know if that's the right solution.
I have set the sidebar and all parents to height:100%, including html:
html, body, .durandal-wrapper, #shell-row, #sidebar {
height: 100% !important;
}
I've been working on getting this demod in jsfiddle but can't get it working. here's what it looks like on my end:
You could use css tables to achieve this.
FIDDLE1 FIDDLE2
Markup
<div class="container">
<div class="sideBar">sideBar</div>
<div class="main">
Content.
</div>
</div>
CSS
.container
{
display: table;
}
.sideBar
{
display: table-cell;
background:pink;
width: 100px;
}
.main
{
display: table-cell;
background:yellow;
overflow:auto;
vertical-align: top;
}
Faux columns is the usual CSS pattern for your issue:
http://line25.com/articles/create-sidebars-of-equal-height-with-faux-columns
Can anyone help me with position my content block?
It looks good if there are a lot of content, but not when window higher than content block.
Actualy I need that "content" block on my picture teked all free space (height) and thats why footer stick to the bottom.
I have next HTML markup:
<div>
<header></header>
<nav class="breadcrumbing"></nav>
<section class="left_nav"></section>
<section class="content"></section>
<footer></footer>
</div>
With this CSS:
html,body{width:100%;margin:0;padding:0;}
body{background-color:#629302}
body>div{width:400px;height:100%;margin:0 auto;background-color:#FFF;}
body>div>header{height:50px;background-color:#9dc155}
body>div>nav.breadcrumbing{display:block;height:10px;margin:0;padding:0;}
body>div>section.left_nav{width:172px;margin:8px 20px;float:left;background-color:#cdef88}
body>div>section.content{width:168px;float:left;}
body>div>footer{padding:19px 19px 22px;background-color: #e58b04;clear:left;}
I allready tried answers from Is it possible to get a div's height to be 100% of an available area? and some same questions but with no luck.
ALso my live HTML has backgroun-images, so I can't just put footer to the bottom with position:absolute.
There I post my HTML to preview: jsfiddle.
UPD: scaled live preview:
You will have to set the html and body height property to 100%; then you can set the footer height to 100%; this will tell the main container elements the real meaning of 100% and it will work.
Your updated fiddle
Basically, these are the rules you have to add:
html, body {
height: 100%;
}
footer {
height: 100%;
}
Update
Ok, I might have misunderstood your requirements, here is a cleaner example:
Working example
Basically, what you additionally do in this example is having your wrapper element display:table with an height: 100%, then you make your footer display as table-row.
Important note: This solution uses display-table which is compatible only for IE8+. If supporting IE7 is an issue for you, then you have two solutions that I can think of out of my head:
Either you use a fixed-width footer, push it below the content and then pull it back with a combination of negative margin and padding.
Or you fallback to support of older browser by putting your footer in position using some javascript.
This the breakdown of the code:
HTML
<div class="wrapper">
<header></header>
<section class="main-content">
{child elements of your main-content area}
</section>
<footer></footer>
</div>
CSS
html, body {
height: 100%;
margin: 0;
}
.wrapper {
display: table;
margin: 0 auto;
height: 100%;
}
.main-content {
display: table-row;
height: 100%;
}
footer {
display: table-row;
}
Here's an updated fiddle
The crux of this is setting the body to be absolutely positioned to the viewport. From there, if you wanted to allow it to scroll as you normally would, then you would change the footer's position to fixed and the content div's CSS to this:
body>div>div{width:400px;height:100%;margin:0 auto;background-color:#FFF;
position:absolute; top: 0; bottom: 0; overflow-y:auto;}
I've wrapped your content div in another to allow for the automatic margins to center your page, and then defined the footer's box sizing as border-box to account for the padding you're adding to it as well.
I have an element (in my case a HR tag) that needs to be as wide as the browser but which is also wider than it's parent container. However, it still needs to maintain relative positioning so that it scrolls vertically with the page. The problem is that my parent div has to have relative positioning as well (due to other layouts that are working).
The only way I have been able to solve this is to set the width of the HR tag to 3000px with a left position of -1000px. This works, but it adds a horizontal scrollbar to the page (to display the 3000px width). Is there any way to accomplish this cleanly (without the horizontal scroll bar)? You can see my fiddle at http://jsfiddle.net/UGwst/.
Here's the HTML:
<div id="layout-wrapper">
<p>Above Content</p>
<div id="content-wrapper">
<p>Top Content Here</p>
<hr class="rule" />
<p>Bottom Content Here</p>
</div>
</div>
Here's the CSS:
#content-wrapper {
width: 400px;
margin-left: auto;
margin-right: auto;
margin-top: 8px;
background-color: #ddd;
position: relative;
}
.rule {
background-color: #dbb328;
height: 5px;
position: relative;
left: -1000px;
width: 3000px;
}
I realize that there are a couple of other questions here that are similar, but don't quite seem to fix this issue.
Use position:relative on the parent.
Use position:absolute on the HR, that way the HR is bound to the parent and will scroll with it.
To hide scroll bars use overflow:hidden on your outer wrapper, or BODY.
Try
body {overflow-x: hidden;}
to eliminate the horizontal scrollbar. According to this answer, it even works in IE6 - CSS - Only Horizontal Overflow?
I would like to build a fluid layout and would like to achieve something like
width:100%-200px;
i.e. have a div with content, call it div id="content" with a fixed margin on either side. I have tried to use the trick of putting the div id="content" into another div container with a margin, but I don't know how to fill out the background of div id="content". Is there a way of telling the div id="content" to use 100% of the available space as background, such that the width of the content plus the width of the margin does not exceed 100% of the browser window size?
Having the DIV set to be 100% with a margin of XXX on either side won't work as that will exceed the size of the browser window.
You could try the following:
body {
padding:0 2%;
}
#content {
width:96%;
}
http://jsfiddle.net/YYhvT/
Use position absolute...
#content {
position: absolute;
left: 0;
right: 200px;
}
See my Fiddle.
PS Advantage is that you don't need values on other elements.
You can put a container around the content and give it 200px left/right padding. This should do the trick (at least, from what I understand of what you are trying to accomplish). Also see this code example:
<!doctype html>
<html>
<head>
<style type="text/css">
body { margin: 0 50px; }
#container { padding: 0 200px; background: #FF0000; }
#content { width: 100%; background: #00FF00; }
</style>
</head>
<body>
<div id="container">
<div id="content">
Here goes my content
</div>
</div>
</body>
</html>
Note that the body margin is just for illustrating purposes, to let you see the background differences.
(I would post a jsFiddle, however I am not able to use it since I can only use IE7 at this point.)
here is my solution,
html:
<div id="content" class="content">
My Content
</div>
css:
.content {
position: absolute;
right: 100px;
left: 100px;
background-color:#A5112C;
}
and link to it: http://jsfiddle.net/MPYHs/
also if you want to put sort of image as a background I suggest you use small pattern like https://ssl.gstatic.com/android/market_images/web/background_stripes.gif
hope it helps,
regards
I have a column of text, with wide margins on either side. Below it, I have a full-width section of data (in tabular format).
I can align these against each other quite readily. My problem is that there is a 'tab' that sits on top of the table section. It's narrow enough that it doesn't interfere with the center column of text, and the layout calls for it to slide up into the white space to the left of the text.
The easy solution would a position:absolute, with top:foopx to slide it up relative to the rest of the div. The only problem is, the tab's height is dynamic. I need to somehow to top:'height'px, but (obviously) CSS doesn't contain anything for dynamic values.
What I need to do is align the bottom edge of the 'tab' against the top edge of the containing div, and I cannot for the life of me figure out any CSS statement that does that. I'd rather avoid a javascript based approach (e. g. at runtime get the height of the tab, then set top equal to that height) because the entire bottom div is refreshed from time to time using an AJAX call, and adjusting the height in that process causes the page to 'jitter' on the update (not sure why it doesn't happen without the height update; the jitter is in a separate section of the code).
Requested code example:
<html>
<head>
<style>
#smallColumn
{
float:left;
width:100px;
height:100px;
background:#000;
margin:5px;
}
#fullColumn
{
float:left;
width:200px;
height:300px;
background:#000;
margin:5px;
}
#bottomDiv
{
position:relative;
}
#tab
{
position:absolute;
top:-40px;
}
</style>
</head>
<body>
<div id="smallColumn">a</div>
<div id="fullColumn">b</div>
<div style="clear:both"></div>
<div id="bottomDiv">
<div id="tab">Tab</div>
<hr />
DATA DATA DATA
</div>
</body>
</html>
Use top margins, the appropriate display properties and vertical-align:bottom. See the code below + comments for an explanation. You have to set a height and negative margin-top value which is larger than the actual height of the tab's content. Otherwise, the content may jump back to the top.
Relevant HTML/CSS:
<div id="cont">
<div id="tab">
<div id="tab-fix">
Tab
</div>
</div>
Rest of content
</div>
#cont {
margin-top: 30px; /*Reserve space*/
height: 100px;
background: lightgreen;
}
#tab {
display: table; /* Necessary for the application */
margin-top: -30px;/* Move tab to the top*/
}
#tab-fix {
height: 30px; /* Expecting the height to not exceed 30px*/
display: table-cell;
vertical-align: bottom; /* Aligns the content at the bottom*/
}
Fiddle: http://jsfiddle.net/stEW3/2/
Update2
So this is a tough problem to solve! The only thing I could think of was to put a wrapper around the tab. That wrapper needs to be relatively positioned and have a height equal to that of the tab. Then you can use absolute and negative top of 100%.
http://jsfiddle.net/mrtsherman/BC8Xr/2/
Update
With posted code I now understand. How about using absolute and specifying a bottom value of 0?
http://jsfiddle.net/mrtsherman/BC8Xr/
<div id="content">
<div id="smallColumn">a</div>
<div id="fullColumn">b</div>
<div style="clear:both"></div>
<div id="bottomDiv">
<div id="tab">Something</div>
<hr />
</div>
</div>
#content { border: 1px solid red; position: relative; }
#bottomDiv
{
position:absolute;
bottom: 0px;
}
#tab
{
/*
position:absolute;
top:-40px;
*/
}
Old
Without html structure and a somewhat vague description this is a bit hard to decipher. But this is what I think you mean:
http://jsfiddle.net/mrtsherman/VM99L/
Basically you want the tab above the tabular data to be drawn up into the div before it. You can use a negative top margin for this. Just set it to the same height as the height of your tab. If you have padding on the div then you will need to compensate for that also.
<div id="tabulardata">
<div id="tab">Tab X</div>
<table>
<tr><td>data</td></tr>
<tr><td>data</td></tr>
<tr><td>data</td></tr>
<tr><td>data</td></tr>
<tr><td>data</td></tr>
</table>
</div>
#tabulardata { margin-top: -50px; }
#tab { height: 50px; width: 80px; background: gray; color: white; }