I feel like I shouldn't be asking such a simple question but I can't find any simple answers out there.
I have a header which can be any height. The content beneath it needs to fill up the remaining space on the page (Both are contained in a necessary container div). How can this be achieved with HTML and CSS? I would consider JavaScript but I want resizing to be automatic when content is added, or the window is resized etc.
HTML code:
<div id="container" >
<div id="header" >
<br/>
<br/>
...variable content in the header (not necessarily text)...
<br/>
<br/>
</div>
<div id="content"></div>
</div>
CSS code:
#container
{
background-color:blue;
width:100%;
height:100%;
}
#header
{
background-color:green;
width:100%;
height:auto;
}
#content
{
background-color:red;
width:100%;
height:100px; /*The height here needs to fill the remaining space in the container div*/
}
I think this may help do what you want to do: http://jsfiddle.net/AGLDV/3/
html, body {
height:100%;
}
#container {
width:100%;
height:100%;
background:#ccc;
display:table;
}
#header {
height:1%;
width:100%;
background:blue;
display:table-row;
}
#content {
width:100%;
background:red;
display:table-row;
}
Fiddle
I set the header height to height: auto; and then added overflow: hidden; to the body, html style.
Just add any text or <br /> in the header and the height will change.
Related
I've a page with a header component and below it content component. (the containing div doesn't have 100% height)
I want to open a map from top (below the header) to the bottom of the screen. (using all of the space) without flex, in the content component.
One way I thought about : get the height of header (lets say X) in the content component. and I will create a div with top: X, left: 0, right: 0 , bottom : 0 (I saw Airbnb were also doing it)
so I wanted to ask, how do I get the Header height in the content component? and do you have any better suggestions?
you can use display:table if flex is unwanted :
html, body {
width:100%;
height:100%;
margin:0;
}
body {
display:table;
}
.row {
display:table-row;
height:100%;
}
header.row {
background:green;
height:0;
}
main.row {
position:relative;
}
main.row div.inner {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background:lightblue
}
/* test height : 100% */
b {
float:left;
height:100%;
background:gray;
margin-left:1em;
}
<header class="row">
<div> here comes header stuff <br/>of any height
</div>
</header>
<main class="row">
<div class="inner">
<b> test to cover height</b>
</div>
</main>
How to make a cross browser solution where an element is vertical aligned?
http://jsfiddle.net/e2yuqtdt/3/
This works in both Firefox and Chrome, but not in IE11
<div class="page_login">
<div>vertical-align:center; text-align:center</div>
</div>
html, body {
height:100%;
}
.page_login {
display:flex;
height:100%;
width:100%;
background:#303030;
}
.page_login > div {
margin:auto;
background:#fff;
min-height:100px;
width:200px;
}
update
When the centered element is higher than the viewport height the background is only 100% and not 100% scroll height
http://jsfiddle.net/e2yuqtdt/8/
html, body {
min-height:100%;
height:100%;
}
.page_login {
display:flex;
min-height:100%;
height:100%;
width:100%;
background:#303030;
}
.page_login > div {
margin:auto;
background:#fff;
height:800px;
width:200px;
}
How to make a cross browser solution where an element is vertical
aligned?
Take a look at this fiddle: http://jsfiddle.net/5ry8vqkL/
The technique applied there is using the "display: table". Here is an article for an in-depth view of the approach http://css-tricks.com/centering-in-the-unknown/
Supported browsers can be seen here: http://caniuse.com/#search=table-cell
HTML:
<div class="container">
<div id="page-login">
<div class="panel">Some content</div>
</div>
</div>
CSS:
html, body {
min-height:100%;
height:100%;
}
.container {
display: table;
height:100%;
width:100%;
background:#303030;
}
#page-login {
display: table-cell;
vertical-align: middle
}
.panel {
height: 100px;
background-color: #fff;
}
You need to add a height to the div. As you have only specified a minimum height, IE automatically expands it to the max possible. So add a height, like this:
.page_login > div {
margin:auto;
background:#fff;
min-height:100px;
width:200px;
height:200px;
}
http://jsfiddle.net/e2yuqtdt/6/
As this is a flex box, and therefore meant to flex, a good idea could be to make the height a percentage. So the div height would be - for example - 50% of the page height, unless the page was less than 200px high - then it would be 100px high.
Update: Unfortunatly it is not possible to make the div fill the whole page with only CSS. However it seems it is possible with Javascript, see here Make a div fill the height of the remaining screen space
Actually - have achived it using tables divs
http://jsfiddle.net/e2yuqtdt/14/
<div>
<div id="div1">
<div id="div2">vertical-align:center; text-align:center</div>
</div>
</div>
#div1 {
display:flex;
height:100%;
width:100%;
background:#303030;
}
#div2 {
margin:auto;
background:#fff;
height:800px;
width:200px;
}
I know this update is coming after the one by elad.chen - but had already done this and posted it in the comment below - just hadn't got round to updating the question.
I have a div with variable height (only an image with max-width:100% and auto height to scale it on resize).
So I would like to have a div with text overlaping this image div... Ok. But then I would like to have other div under this wrap with image..
Here's the problem.. I don't know the height of the div ('cause it deppends on the image height on resize) and then, when I try to continue the other divs that should be under this wrap, the get stucker under it 'cause its position is absolute!
<div id="wrap">
<div id="background">
<img src="http://i.imgur.com/hXtf2Dq.jpg" class="myImage" />
</div><!-- #wf_sliderItemBackground -->
<div id="mySubtitle">
dfdf
</div><!-- #background -->
</div><!-- #wrap -->
<div>
I CANT MAKE THIS DIV APPEAR UNDER THE IMAGE... I CANT USE DIMENSIONS SINCE I'M TRYING TO CREATE A RESPONSIVE LAYOUT AND USING HEIGHT IN PIXELS WOULD RUIN IT...
</div>
And here is the CSS:
* { margin:0; padding:0; }
#wrap {
width:100%;
display:table;
text-align:center;
}
#background {
width:100%;
max-width:100%;
position:absolute;
}
.myImage {
width: 100%;
max-width: 100%;
}
#mySubtitle {
margin:0 auto;
width:100%;
max-width:1200px;
background:green;
position:relative;
}
Check the fidddle:
http://jsfiddle.net/cjd6n0mm/
Since your text div is outside the wrap div, wrap should be relative with a height defined
#wrap {
width:100%;
position:relative;
display:table;
text-align:center;
height:50%
}
and cover your text div in specific div
div.a {
color:blue;
position:relative;
bottom:0;
}
Also, instead of hard reset *, use html,body reset, thats a rule of thumb
html, body {
width:100%;
height:100%;
margin:0;
padding:0;
}
Fiddle demo
I have a (relatively) simple layout, with fixed header and footer divs. The content div is split in two "full height" divs with display: inline-block;. The left div is used for navigation and the right one for the actual content and has overflow-y: scroll;. The problem is that I cannot set the width of the right div to fill the remaining space. I have tried using float (as a last resort) but the right div was pushed downwards and, honestly, I'd prefer not to use floats.
Is filling the remaining width possible in my scenario? I would very much like to not hardcode the width of the right div.
Here's the JSFiddle example.
Simple HTML structure:
<html>
<head></head>
<body
<div id="container">
<div id="header">This is the header area.</div>
<div id="content">
<div id="leftContent"> </div>
<div id="textContent">
<p>Hello world (and other content)</p>
</div>
</div>
<div id="footer">This is the footer area.</div>
</div>
</body>
</html>
CSS excerpt:
html, body { margin:0; padding:0; height:100%; }
#container { position:relative; margin:0 auto; width:750px; overflow:hidden;
height:auto !important; height:100%; min-height:100%; }
#header { border-bottom:1px solid black; height:30px; }
#content { position:absolute; top:31px; bottom:30px; overflow-y:none; width:100%; }
#leftContent { display:inline-block; height:100%; width:200px;
border-right:1px solid black; vertical-align:top; }
#textContent { display:inline-block; height:100%; vertical-align:top; overflow-y:scroll;
width:540px; /*would like to not have it hardcoded*/ }
#footer { position:absolute; width:100%; bottom:0; height:30px; }
Edit:
Thanks to Prasanth's answer, I was able to achieve what I wanted. The solution was to set
display:flex; flex-direction:row; on the #content div and
width: 100%; on the #textContent div.
Testing on IE 11 (and downwards in compatibility mode) did not produce unwanted results.* The new version can be found here.
*Edit: This method works properly in IE11. In IE10, the scrollbars do not appear if the content of the #content div requires scrolling. The layout works thought. In IE <10 it does not work at all.
You can use Flexbox to achieve this
Go through this and you will get what you need
.content{ display:flex } .content > div { flex: 1 auto; }
and beware of browser support
I've been trying to make this work for a while and it never seems to work out. I think its because my HTML structure is slightly different than the ones in the example. My problem is, on pages that are smaller than the viewport, the footer is not automatically pushed to the bottom, and the #main div is not extended to the footer.
Here's my HTML:
<html>
<body>
<div id='container'>
<div id='main'>
<div id='content'> </div>
</div>
<div id='footer'> </div>
</div>
</body>
</html>
And here would be my basic CSS, without implementation of CSS Sticky Footer:
div#container {
width:960px;
margin:0 auto;
}
div#main {
background-color:black
padding-bottom:30px;
}
div#content {
width:425px;
}
div#footer {
position:relative;
bottom:0;
width:inherit;
height:90px;
}
To clarify: Lets say the background of div#main is black. Now lets say, on a page, there's only 1 line of text in div#main. So I want to make the #main area extend all the way down to the footer (which is at the bottom of the page) even when there isn't enough content to force that to happen. make sense?
And One more thing. The #main area has a different background color than the body. So the #main background has to extend all the way down to the footer, cause if there's a gap, the body color peaks through instead
Try making the footer position:fixed.
http://jsfiddle.net/QwJyp/
Update
I'm a little bit closer: http://jsfiddle.net/QwJyp/1/. Perhaps somebody can build off it. If you remove the line with !important defined, it allows the main with height:100% to show up. But there's still a lot of extra padding at the bottom of the div which I can't figure out. I'll continue later when I have more time. Good luck! Hopefully this helps with some direction.
Here you go: http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
EDIT
Using the technique in the article above (tested - and works in fiddle):
HTML
<html>
<head>
</head>
<body>
<div id='container'>
<div id='main'>
<div id='content'>Hello</div>
</div>
<div id='footer'> </div>
</div>
</body>
</html>
CSS
html, body {
margin: 0; padding: 0; height: 100%;
}
div#container,div#main {
background-color: #333;
}
div#container {
min-height:100%; width:960px; margin:0 auto; position:relative;
}
div#main {
padding-bottom:90px; margin:0; padding:10px;
}
div#content {
width:425px;
}
div#footer {
position:absolute; bottom:0; width: 100%; height:90px; background-color: #ADF;
}
idea is to have #main with padding-bottom x, container min-height: 100%, footer after container and with margin-top -x
Try using with absolute position for the footer div
<div id='container'>
<div id='main'>
<div id='content'> </div>
</div>
<div id='footer'> </div>
</div>
Make sure that body height is 100%
html,body
{ height:100%;
padding:0;
margin:0;
}
div#container {
width:960px;
margin:0 auto;
position:relative;
height:100%;
}
div#main {
background-color:black;
padding-bottom:90px;
}
div#content {
width:425px;
}
div#footer {
position:absolute;
bottom:0;
width:inherit;
height:90px;
width:960px;
}
I know the html is structured differently than what you're working with, but perhaps you can alter your core structure to mimic this (because it works): CSS Sticky Footer
It looks like this group has done a lot of research on the topic and have found this it be the best (maybe the only?) way...through many different versions.