<div id="container">
<div id="content">
//my content
</div>
</div>
#container{
height:100%!important;
min-height:700px!important;
}
#content{
height:100%!important;
}
I have a container div with a content div inside, no matter what I do, I can't get the content div to be the same height as the container div. Am I missing something?
Thanks
<style>
#container{
height:700px !important;
border:1px solid red;
}
#content{
height:100%!important;
border:1px solid green;
}
</style>
<div id="container">
<div id="content">
//my content
</div>
</div>
just add min-height:inherit to content style
#content{
height:100%!important;
min-height:inherit;
}
Add height:100% to html and body
html, body{height:100%}
DEMO
you can add min-height:700px (or inherit) to child div also. I hope it does the trick.
UPDATED DEMO
Add more content to the inner div to check the height:100% effect when content increases.
Related
How to set flexible height for parent div. In my code popup is there inside div. If I open the popup i want to increase the height of the parent div. I have used height:100% but it is not working. So, How to resolve this issue.
HTML:
<div class="main">
<a href="#" open-popup>Popup</a>
<maincontent class="content">
shadow-root(open)
<popup class="popup"> ..content..</popup>
</maincontent >
</div>
CSS:
.main{
height:100%;
width:100%;
display:table;
border:2px solid #ccc;
}
.content{
display:flex;
justify-content:center;
}
Getting like this:
Expected like this:
You can use auto height
height: auto;
instead of
height:100%;
to not disturb height of parent div
To main class you can use display "block" property instead of "table" and heigth will be "auto" or just don't define it will take automatically take.
<div class="main">
<a href="#" open-popup>Popup</a>
<main class="content">
shadow-root(open)
<div class="popup"> ..content..</div>
</main>
.main{
height:auto;
width:100%;
display:block;
border:2px solid #ccc;
}
.content {
display:flex;
justify-content:center;
}
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
}
How do I make the <hr> width 100% of the screen, not its parent?
CSS
#abc {
width: 700px;
}
hr {
width: 100%;
}
HTML
<div id="abc">adsasd<hr></div>
You cannot do it the way that you have it structured. You need the <hr> outside of that container that has a fixed width. Otherwise 100% width of the <hr> will be relative of its parent, not the page. Try
<div id="abc">
adsasd
</div>
<!-- put the hr on its own -->
<hr>
<div id="def">
asdfghjkl
</div>
Another thing that you can do is to enclose the content in a container with that width, but not the div containing the content and the hr.
<div id="row"><!-- use a class that takes up all the width of the page -->
<div class="has-width">adsasd</div> <!-- create a class with a width-->
<hr>
</div>
If it was me, I'd refactor the markup to something like:
<div id="menu">
<div class="buttons">Buttons</div>
</div>
<div id="main">
Main
</div>
and use CSS for the horizontal lines:
#menu
{
width:100%;
border-top:solid 1px black;
border-bottom:solid 1px black;
}
#menu .buttons, #main
{
width:400px;
margin:0 auto;
}
#menu .buttons
{
background-color:#F00;
}
Demo
I'm trying to place two divs one above the other. The top div should stay always visible (not scrolling). The div below contains a list, and if the list is too long, and overflows the window/containing div, the div should be scrollable. When defining the height of the top div, it's good, but the content of the top div may change, so the height should not be fixed (like in this question).
My attempt on Plunker.
Is it possible with pure CSS, without JavaScript calculation?
Edit:
The list should strech to the bottom of the screen/container div.
You need to use some not too obvious CSS trickery to get the behaviour you're after, importantly any scrollable content needs to be within a separate container in a CSS table's cell, with overflow-y set, and a height of 100%. The top cell then needs a height of 1% to auto expand as appropriate.
Then all you need to do is set the tables height and max-height as appropriate.
By using CSS tables, you get a lot more flexibility when it comes to layout calculation/manipulation in terms of relating the sizes of elements
Demo Fiddle
CSS
html, body {
height:100%;
width:100%;
margin:0;
padding:0;
}
.table {
display:table;
table-layout:fixed;
height:100%;
width:100%;
max-height:100%;
}
.row {
display:table-row;
}
.cell {
display:table-cell;
}
.row:first-of-type >.cell {
background:lightgreen;
height:1%;
}
.row:last-of-type >.cell {
background:pink;
}
#list {
height:100%;
overflow-y:auto;
}
HTML
<div class='table'>
<div class='row'>
<div class='cell'>This is text in the <strong>list-head</strong>, it's content may change, so the height of the div shouldn't be fixed, but should stay always visible (not scrolling).</div>
</div>
<div class='row'>
<div class='cell'>
<div id="list">
<div class="list-element">These are list elements.</div>
<div class="list-element">If the list is too long</div>
<div class="list-element">and reaches the bottom</div>
<div class="list-element">the list should be scrollable.</div>
<div class="list-element">(And only the list</div>
<div class="list-element">not together with the <strong>list-head</strong>.)</div>
</div>
</div>
</div>
</div>
Will this work for you ?
<div id="top" >
</div>
<div id="bottom">
</div>
<style>
#top{
display:block;
width:100%;
}
#bottom{
overflow:scroll;
display:block;
height:500px;
width:100%;
}
</style>
use this structure
<div class="main">
<div class="header">
</div>
<div class="content">
</div>
</div>
.main{
height:100%;
}
.header{
height:50px;
position:fixed;
top:0;
background:#454546;
width:100%;
}
.content{
margin-top:53px;
background:#ffffff;
}
Demo
I want to know how do you guys make the header-side-main-footer layout in html.
Like this:
<html>
<div class="header"></div>
<div class="content">
<div class="side"></div>
<div class="main"></div>
</div>
<div class="footer"></div>
</html>
The div.header and the div.footer have a fixed height. And the div.content will hold all the rest height,no scroll bar for the body.
And the div.side will have a fixed width,and the div.main will hold all the rest width.
The div.side can have y-scroll bar.
When the window resize,the div.content will expand to fix the height,no scroll bar.
BTW,sometimes the div.side and the div.main may exchange the position like this:
<html>
<div class="header"></div>
<div class="content">
<div class="main"></div>
<div class="side"></div>
</div>
<div class="footer"></div>
</html>
How to you make it?
update:
div.main can not made as overflow:hidden,since it is the container which I use for ceate the map.
var map=new google.maps.Map('main',{});
Gave div.side a height and width and then overflow:scroll
Like:
div.side{
height:60%;
width: 60%;
overflow: scroll;
}
and div.content overflow:hidden
That is how I would do it in html, well I would add a wrapper around it to make centering easy, but that is just me. I think you want to know about the css, and to be hones, there are going to be many ways one might go about that, the simples being:
.header {
width:whateverpx;
margin:0 auto;
}
.content {
width:100%;
position:relative;
}
.content:after {
clear:both;
content:"";
display:none;
}
.side {
float:left;
position:relative;
width: your width for it;
}
.main {
float:left;
position:relative;
}
.footer {
height: whateverpx;
width: whateverpx;
margin:0 auto;
}
and, if you want the content centered add a wrapper around it and add
.wrapper {
width:whatever;
marging:0 auto;
}
or
no wrapper, do this for .content instead
.content {
width: whatever
margin:0 auto;
position:relative;
}