I have a div container in my html page and i want set its height to expand all remaining page in the screen..
How can i do that ??
That's my code :
HTML
<div class="row">
<div id="builder-container" class="col-xs-12 col-lg-9">
<div id="builder-content" > </div>
</div>
</div>
CSS
#builder-container {
background-color: #ccc;
height: 100%;
}
You have to give all of the parent elements, including the div you want to extend, a height of 100%.
Actually it would not get cover your whole page without enough content, but the best way is to give it 'position:absolute/fixed/relative' and give the same div top:whateveryouwant px; and bottom: 0px/0%; width and height :100%
JSFiddle - Edited: Check it now
CSS
body
{
margin:0;
width:100%;
height:100%;
}
#builder-container {
display:block;
position:absolute;
margin-top:5%;
left:0%;
bottom:0%;
background-color: #ccc;
height: 100%;
width:100%;
}
html
<div class="row full_height">
<h1>Test elem</h1>
</div>
css
.full_height {
height: 100vh
}
Related
I have a bootstrap 3 page with a centered box which contains content.
If the content grows the box stays static and doesn't grows with my content but the bootstrap container grows.
I don't know why the "box" did'nt expand. I tried "position:relative" and "overflow:hidden" but it doesn't work.
I tried also "container-fluid" - no reaction.
My CSS-Stylesheet:
html,
body {
height:100%;
width:100%;
}
.container {
height:100%;
min-height:100%;
}
.row {
height:100%;
min-height:100%;
}
.box {
height:90%;
min-height:90%;
max-width:1100px;
background-color:rgba(0,0,0,0.83);
text-align:left;
padding-left:5%;
padding-right:5%;
padding-top:1%;
overflow:hidde;
position: relative;
}
HTML:
<div class="container">
<div class="row">
<div class="box">
<div class="col-xs-12">
</div>
</div>
</div>
</div>
You have hardcoded the height of you box, thats why it doesnt grow as more content comes in. You have to set the height to auto. And if you want that the box has a minimum height while not so much content is present just use an additional min-height: 100vh;
.box {
height:auto;
min-height: 100vh;
/* etc.
}
See working Fiddle
Since you are using bootstrap, try to make like this
<div class="container">
<div class="row">
<div class="col-md-12 box">
<div class="col-xs-12">
</div>
</div>
</div>
and then make the height like:
.box
{
height: 100%;
}
I have some child divs placed in a parent div. It looks like that:
Now I need to place an image with a relative size into the red(brown) div.
But every time when I place the image into the div the layouts expands.
And that is a problem for me.
So how can I put an image with a relative size into my div without expanding the div layout?
HTML:
<div class="textContentContainer">
<div class="FirstSectionContentHeader">
<table class="layoutTable"><tr><td class="centerDiv">
<div class="FirstSectionHeaderintroText uppercase">
SOME TEXT
</div>
</td></tr></table>
</div>
<div class="FirstSectionLogoArea">
<img src="../img/Headerlogo.png" alt="Description" class="FirstSectionTitleLogo">
</div>
<div class="FirstSectionIntroText usualText">
ddd
</div>
<div class="FirstSectionBottomLayout">
<img src="../img/basics/Pfeil.png" alt="Pfeil" class="FirstSectionBottomArrow">
</div>
</div>
CSS
.FirstSectionContentHeader{
height:10%;
width: 100%;
font-weight:200;
text-align:center;
background-color: aqua;
}
.FirstSectionLogoArea{
height:10%;
width:100%;
background-color: chartreuse;
}
.FirstSectionTitleLogo{
height:80%;
width:100%;
object-fit:contain;
}
.FirstSectionIntroText {
height:70%;
width:100%;
background-color:white;
}
.FirstSectionBottomLayout{
height:10%;
width:100%;
background-color: brown;
}
.FirstSectionBottomArrow {
height:10%;
width:10%;
object-fit:scale-down;
}
the image has position: staticby default, which is "inserted" in the parent element and "takes some space" there, causing the parent element to become larger. You can give it position: absolute(which requires that the parent element has position: relative) and still use percentage values.
How do I get a wrapper div that is 100% height to expand its with the height of its children? That are also 100% in height.
The setup looks like this:
<div id="wrapper" style="height:100%">
<div class="child" style="height:100%">div1</div>
<div class="child" style="height:100%">div2</div>
</div>
But the wrapper dosen't expand to 200% height. I have tried making the wrapper min-height:100%; but then the children don't inherit the full height, only the height of their own content.
https://jsfiddle.net/on78pof8/
(The aqua colored box, dosen't expand)
Please tell me if I didn't understand the question correctly.
I think you have forgotten to add width:100%; to the child divs.
To remove the extra scroll bar on the html/body, you can remove the default margin/padding of html and body by using this declaration:
html,body{
margin:0;
padding:0;
}
Here is what I believe you have in mind:
html,
body {
height: 100%;
margin:0;
padding:0;
}
#wrapper {
background: aqua;
height: 100%;
overflow: auto;
}
.child {
height: 100%;
width: 100%;
}
<div id="wrapper">
<div class="child">div1</div>
<div class="child">div2</div>
</div>
Set height in viewport units on the child divs
.child {
height:100vh;
}
Demo (with viewport units)
(NB: The OP is actually interested in background image on the wrapper instead of the solid aqua color)
html,
body {
height: 100%;
}
#wrapper {
background: aqua;
}
.child {
height: 100vh;
}
<div id="wrapper">
<div class="child">div1</div>
<div class="child">div2</div>
</div>
If you don't want to use viewport units (which by the way - as #CoadToad pointed out in the comments - has very good support) - then I think you'll have to use javascript.
Demo (with javascript)
If you want a dynamic number for the height of the child divs, depending on your needs, you can set these from the view-port height (vw) but this assumes you want them each to be the full height of the entire document.
You need to set overflow-y: auto on the parent for this to work. Here:
html,body {
height:100%;
margin: 0;
}
#wrapper {
background:aqua;
height:100%;
overflow-y: auto;
}
.child {
height:100%;
}
<div id="wrapper">
<div class="child">div1</div>
<div class="child">div2</div>
</div>
I can't set a height (in %) to a div (class="item") whose parent (class="site-section") has a min-height: 100%.
This is my HTML:
<div class="spacer"></div>
<header class="site-header"></header>
<div class="spacer"></div>
<div class="spacer"></div>
<section class="site-section">
<div class="column">
<div>I would like to be able to set an later
change the height of this green item.
<div class="item">ITEM</div>
</div>
</section>
<div class="spacer"></div>
<div class="spacer"></div>
<footer class="site-footer"></footer>
<div class="spacer"></div>
This is my CSS:
html, body {
height:100%;
margin 0;
color:blue;
}
.spacer {
height:1%;
}
.site-header {
height:8%;
background-color:yellow;
}
.site-section {
min-height:78%;
background-color:#ffcccc;
color:#aaa;
}
.site-footer {
height:8%;
background-color:yellow;
}
.column {
width: 50%;
}
.item {
height: 40%;
background-color: #33cc33;}
Here is the DEMO.
Everything was working fine until I added DOCTYPE to my HTML. There was no need to set height (in %) for html, body and .site-section, so .item was having his height: 20%. Now, because of DOCTYPE I need to set height for html, body, and .site-section. The consequence is that .item does not react to height: 20% anymore.
Any idea how to solve this?
P.S. I've based my demo on Bart's demo in this question.
#CBroe is correct in that you can't really get a height percent unless the parent itself has a height (ex. height: 35px). I would recommend setting the height of the div, then your inside divs can be set to percentages.
But I played a tiny bit with your fiddle and didn't know if adding position: absolute to the your class item CSS is sort of what you're looking for? So your CSS would look something like this:
.item {
position: absolute;
height: 40%;
background-color: #33cc33;
}
Here is the demo modified to show the example.
NOTE: Even though the height is flexible, if you set the height to 100% it will go above the rest of the divs.
.item{
position:absolute;
height:40%;
background:#33cc33;
}
.items {
position:relative;
height:100%;
background:inherit;}
HTML
<div class="item">
<div class='items'>
ITEM Try
</div>
</div>
Try :)
Here is my HTML:
<div id="container">
<div id="left-container">
</div>
<div id="right-container">
</div>
</div>
The container is 100% height (I checked it with Firebug). But the #left_container needs to be 100% too and it isn't!
Below is my CSS and a screenshot. The yellow should be 100%. Yellow is the background of the #left-container
html, body {
height: 100%;
}
#container {
position:relative;
margin: 0 auto;
width: 100%;
height:100%;
height: auto !important;
min-height:100%;
background: #fff;
}
#left-container {
width: 300px;
background: #ff0;
height:100%;
height: auto !important;
min-height:100%;
}
This article discusses both the issue and solution in detail:
http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
This might help too:
<style>
#outer {position:absolute; height:auto; width:200px; border: 1px solid red; }
#inner {position:absolute; height:100%; width:20px; border:1px solid black; }
</style>
<div id='outer'>
<div id='inner'>
</div>
text
</div>
See here for more details on the above:
How to make a floated div 100% height of its parent?
The best way to approach this problem is to think outside the box a little. There's no reason that both containers need to stretch to 100% if you're just concerned about the background stretching for both of them. There's a really simple technique called Faux Columns in which you combine the backgrounds for both sidebars into one single background image, and set the main container's background to that image. When a longer sidebar stretches the main container, it brings down the background for both sidebars.
<style>
#outer-container {
height:200vh;
width:100%;
position:relative;
background-color:orange;
}
#left-container{
position:absolute;
width:100%;
height:100%;
background-color:blue;
}
</style>
<body>
<div id="outer-container">
<div id="left-container">
</div>
</div>
</body>
You should be able to use just
margin:0;
padding:0;
height:100%;
For the conatainers to get what you want.