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>
Related
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 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.
I have that problem: I want to have a centered layout with or without a right-side sidebanner (it should float right to the content). so my css has to center content+sidebanner IN CASE there is a sidebanner tag or just the content (content and sidebanner have a fixed width) if there is no sidebanner tag - there are some pages where there should be the sidebanner and on some it isn't. css should format both possibilities well.
so it should like this:
<div id="wrapper"><div id="content"></div><div id="sidebanner"></div></div>
i tried a couple of things with floats and display:inline but it didn't really work out :(
Try this...
#wrapper {
position:relative;
left:50%;
margin-left:-500px;
width:1000px;
}
margin-left should be negative half of the width.
For the sidebanner, when its there, you can add a class .wsidebanner to the content block as follows:
<div id="content" class="wsidebanner"></div>
and the css would be:
#content {
background-color:#199;
}
.wsidebanner {
float:left;
width:800px;
}
#sidebanner {
background-color:#919;
float:right;
width:200px;
}
i would use following
#wrapper {
width:1000px;
margin:0 auto; //centering the wrapper
position:relative; //so we can position the ad absolutely
}
#sidebanner {
width:120px;
position:absolute;
top:0;
right:-120px; // same as width
}
Since selecting an element's parent is not possible with CSS, you'll have to add a class to the wrapper div when there's no sidebar.
HTML
<div id="wrapper">
<div id="sidebanner">...</div>
<div id="content">...</div>
</div>
<div id="wrapper" class="nosb">
<div id="content">C</div>
</div>
CSS
#wrapper {
width: 400px;
margin: 0 auto;
}
#wrapper.nosb {
width: 300px;
}
#content + #sidebanner {
margin-right: 100px;
}
#sidebanner {
float: right;
width: 100px;
}
See fiddle.
Note: IE6 doesn't support the adjacent sibling selector.
I'm looking for CSS rules to set a simple page layout.
I want a header div that has a fixed height, and extends fully across the top of the viewport from left to right,
I want a main content div that completely fills the remainder of the viewport.
There should be no area within the viewport that is not within one of these two divs, and neither div should extend beyond the viewport.
And these should remain true as I resize the browser. Regardless of what I put in either div. (Assuming, of course, that I'm not using overflow:visible.)
Seems simple enough, but I've not been able to make it work.
What about something like this: http://jsfiddle.net/WqCYh/
For the sake of people not wanting to click the link, here's the HTML and CSS:
<style type="text/css">
#header
{
height:100px;
background-color:red;
position:absolute;
top:0px;
left:0px;
right:0px;
}
#body
{
background-color:blue;
position:absolute;
top:100px;
left:0px;
bottom:0px;
right:0px;
}
</style>
<div id="header">
Header
</div>
<div id="body">
Body
</div>
Are you sure you need your content div to be the height of the browser? You can apply a background color to the body to simulate full viewport coverage.
Anyway here is the 100% height code...
CSS
html,body { height: 100%; }
#header { height: 100px; background: red; }
#content { min-height: 100%; background: blue; }
#inner { padding: 20px; }
XHTML
<div id="content">
<div id="header">
<h1>Header</h1>
</div>
<div id="inner">
<p>Content</p>
</div>
</div>