I'm working with quite a complex layout using display: table-row and in IE I can't get the row to stretch when I'm using a nested table.
Check out this in http://jsfiddle.net/DVxpZ/7/ in Chrome/FF vs IE(10)
I want the blue row to stretch to fill the available space and the purple row to be at the bottom.
Any advice gratefully received. I tried using position: fixed; for this kind of layout but then I can't get the rows to resize as the screen size gets smaller.
<div id="full-height" class="table">
<header class="table-row"><div class="button"></div></header>
<div id="main"class="table-row">
<div class="table">
<div id="row1" class="table-row"><div class="button"></div></div>
<div id="row2" class="table-row"><div class="button"></div></div>
<div id="row3" class="table-row"><div class="button"></div></div>
<div id="row4" class="table-row stretch-row"><div class="button"></div></div>
<div id="row5" class="table-row"><div class="button"></div></div>
</div>
</div>
</div>
And the css
body, html{
height: 100%;
width: 100%;
overflow: hidden;
overflow-y: auto;
}
.table-cell{
display: table-cell;
}
.full-cell{
height: 100%;
width: 100%;
}
#main{
height: 100%;
}
.button{
display: block;
height: 30px;
width: 100px;
background-color: green;
margin: 3px;
}
#row1{
background-color: pink;
}
#row2{
background-color: orange;
}
#row3{
background-color: red;
}
#row4{
background-color: blue;
}
#row5{
background-color: purple;
}
#full-height{
height:100%;
width: 100%;
}
.table{
display: table;
height: 100%;
width: 100%;
background: yellow;
}
.table-row {
display: table-row;
}
.stretch-row{
height: 100%;
}
*{
margin:0;
padding:0;
}
Try to reset all element margin??
http://jsfiddle.net/DVxpZ/9/
Related
I want the divs inside content_container to be stacked vertically below each other and not overlap. Please help.
My HTML code:
<div id=content_container>
<div id=sub_nav>
</div>
<div id=content>
</div>
</div>
My CSS code:
#content_container{
float: left;
width: 100%;
height: 100%;
overflow: auto;
text-align: center;
}
#sub_nav{
position: fixed;
width: 100%;
}
#content{
width: 100%;
}
[1]: https://i.stack.imgur.com/28184.jpg
HTML
<div id=content_container>
<div id=sub_nav>
</div>
<div id=content>
</div>
</div>
CSS
#content_container{
float: left;
width: 100%;
height: 100%;
overflow: auto;
text-align: center;
display: flex;
flex-direction: column;
}
#sub_nav{
position: -webkit-sticky;
position: sticky;
top:0;
width: 100%;
}
#content{
width: 100%;
}
Hope this helps !!
Also, refer to https://css-tricks.com/snippets/css/a-guide-to-flexbox/ for full flexbox reference.
Your problem is the "position: fixed;" for the #sub_nav div.
Remove that and they should stack one on top of the other.
It will be much easily to use flex boxes:
#content_container {
display: flex;
height: 500px;
width: 100%;
}
#sub_nav {
background: red;
width: 200px;
}
#content {
flex: 1;
background: blue;
}
<div id=content_container>
<div id=sub_nav>
</div>
<div id=content>
</div>
</div>
Try This...
#content_container{
width: 100%;
height: 100%;
display: flex;
}
#sub_nav{
width: 50%;
height: 200px;
background-color: red;
}
#content{
width: 50%;
background-color: blue;
height: 200px;
}
<body>
<div id=content_container>
<div id=sub_nav>
</div>
<div id=content>
</div>
</div>
<body>
Much easier to do with flex boxes.
#content_container {
display: flex;
height: 500px;
width: 100%;
}
#sub_nav {
background: white;
width: 100px;
}
#content {
flex: 1;
background: green;
}
<div id=content_container>
<div id=sub_nav>
</div>
<div id=content>
</div>
</div>
position: fixed takes the element out of the flow and make it fixed to the viewport. which leads the next element to overlap.
so you need to let fixed element sub_nav show on top. and content would show by giving it padding on top or move the top start point with relative
element{
position: relative;
top: 20px;
}
Example
#content_container {
float: left;
width: 100%;
height: 100%;
overflow: auto;
text-align: center;
}
#sub_nav {
background-color: yellow;
position: fixed;
width: 100%;
z-index: 1;
}
#content {
background-color: cyan;
width: 100%;
padding-top: 30px;
height: 100px;
}
<div id=content_container>
<div id=sub_nav>sub_nav
</div>
<div id=content>content
</div>
</div>
This question already has answers here:
Fill remaining vertical space with CSS using display:flex
(6 answers)
Closed 7 years ago.
What I have is a simple structure of container followed by two child elements, contentand footer.
footer has a fixed height and content should fill remaining empty space. That is easy enough to achieve with display:table; but for some reason I can't figure out how to make content element overflow to work if its contents exceed website window height?
Here is a JSFiddle, if you set content_child height to say 10pxyou can see content element filling up the space nicely but when content_child is a lot bigger content element shouldn't expand the way it does now, what am i missing here?
I would prefer to not use JavaScript to solve this if possible.
body, html{
height: 100%;
padding: 0px;
margin: 0px;
}
.container{
display:table;
background; black;
width: 100%;
background: black;
height: 100%;
}
.top{
background: blue;
display:table-row;
height: 100%;
}
.bottom{
background: red;
height: 60px;
}
.content{
height: 100%;
overflow: hidden;
padding: 5px;
}
.content_child{
height: 1000px;
background: grey;
}
<div class="container">
<div class="top">
<div class="content">
<div class="content_child"></div>
</div>
</div>
</div>
<div class="bottom">
</div>
</div>
Flexbox can do that.
body {
margin:0;
}
.container {
height: 100vh;
display: flex;
flex-direction: column;
}
.content {
flex: 1;
background: #bada55;
overflow-y: auto;
}
.expander {
height: 1000px;
/* for demo purposes */
}
footer {
background: red;
height: 60px;
}
<div class="container">
<div class="content">
<div class="expander"></div>
</div>
<footer></footer>
</div>
The only thing you need to do is to change this CSS rule
.content{
height: 100%;
overflow: auto; /* change from hidden to auto */
padding: 5px;
}
which will make it look/work like this
body, html{
height: 100%;
padding: 0px;
margin: 0px;
}
.container{
display:table;
background; black;
width: 100%;
background: black;
height: 100%;
}
.top{
background: blue;
display:table-row;
height: 100%;
}
.bottom{
background: red;
height: 60px;
}
.content{
height: 100%;
overflow: auto;
padding: 5px;
}
.content_child{
height: 1000px;
background: grey;
}
<div class="container">
<div class="top">
<div class="content">
<div class="content_child"></div>
</div>
</div>
<div class="bottom">
</div>
</div>
No need for tables, really. Depending on what you are trying to achieve, this may work for you:
body {
padding: 0;
margin: 0;
}
.content {
position: fixed;
top: 0;
bottom: 50px;
width: 100%;
background: blue;
color: #fff;
overflow-y: auto;
}
.footer {
position: fixed;
bottom: 0;
height: 50px;
width: 100%;
background: red;
}
<div class="content">
<p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p>
<p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p>
<p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p>
<p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p>
<p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p>
<p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p>
<p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p>
<p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p>
</div>
<div class="footer"></div>
And if there's no fancier purpose, you could always just change the body background, the same end result here with less code. The only difference is that the scroll bar shows above the footer as well in this one.
body {
padding: 0;
margin: 0;
background: blue;
color: #fff;
}
.footer {
position: fixed;
bottom: 0;
height: 50px;
width: 100%;
background: red;
}
<p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p>
<p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p>
<p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p>
<p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p>
<p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p>
<p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p>
<p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p>
<p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p>
<div class="footer"></div>
I hope this will help if you set height as auto
body, html{
padding: 0px;
margin: 0px;
}
.container{
display:table;
background; black;
width: 100%;
background: black;
height: auto;
}
.top{
background: blue;
display:table-row;
height: auto;
}
.bottom{
background: red;
height: 60px;
}
.content{
height: auto;
overflow: hidden;
padding: 5px;
}
.content_child{
height: auto;
background: grey;
}
Maybe use calc() for height of .top instead of using display: table
.top{
background: blue;
height: calc(100% - 70px);
padding: 5px;
}
.content{
height: 100%;
overflow-y: scroll;
}
Check out this working fiddle: https://jsfiddle.net/xyxj02ge/4/
If you drag the resizeable yellow div up to its maximum possible height, it will overflow and a scrollbar is displayed.
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.container {
height:100%;
width: 100%;
background-color: red;
display: table;
}
.header {
background-color: green;
height:100%;
display: table-row;
}
.content {
width:100%;
height: auto;
background-color:white;
display: table-row;
}
.control {
resize: vertical;
overflow: auto;
background-color: yellow;
}
<div class="container">
<div class="header"> </div>
<div class="content">
<div class="control"> </div>
</div>
</div>
What's causing this and how can I prevent it?
It's because the yellow box keeps getting bigger until it overflows the container; you can prevent this using CSS max-height: 100%. The problem with this is that the container keeps expanding as the yellow box expands, so the yellow box never actually fills the available space. I fixed this by giving the container position: relative and the resizable control position: absolute.
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.container {
height:100%;
width: 100%;
background-color: red;
display: table;
position: relative;
}
.header {
background-color: green;
height:100%;
display: table-row;
}
.content {
width:100%;
height: auto;
background-color:white;
display: table-row;
}
.control {
position: absolute;
bottom: 0;
height: 20px;
left: 0;
right: 0;
resize: vertical;
overflow: auto;
background-color: yellow;
max-height: 100%;
}
<div class="container">
<div class="header"> </div>
<div class="content">
<div class="control"> </div>
</div>
</div>
how can I make all divs get on the same line and fill div#2 the space between the left floated div#1 and right floated div#3?
Maybe flex will help you, here is an JSFiddle.
HTML
<div class="parent">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</div>
CSS
.parent {
display: -webkit-flex;
display: flex;
}
.div1 {
width: 30px;
height: 30px;
background: #FFCC99;
}
.div3 {
width: 30px;
height: 30px;
background: #FCF305;
}
.div2 {
-webkit-flex: auto;
flex: auto;
height: 30px;
background: #CCFFCC;
}
You could use display: table for this kind of implementation (note this is not using tables for layout):
html,
body {
margin: 0;
padding: 0;
}
.wrap {
display: table;
width: 100vw;
}
.one {
display: table-cell;
height: 50px;
width: 20%;
background: red;
}
.two {
display: table-cell;
height: 50%;
width: 60%;
background: cornflowerblue;
}
.three {
display: table-cell;
background: lime;
height: 50px;
}
<div class="wrap">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
Notice how I haven't set a width on the last element, yet it's filling the rest of the space available?
Here's a dummy implementation:
<div id="l"></div>
<div id="r"></div>
<div id="c"></div>
<style>
#l {
float: left;
width:30%;
}
#r {
float: right;
width: 30%;
}
#c {
margin: 0 auto;
width: 40%;
}
</style>
I'm currently strugging to make a node-webkit app fit the height of the current window. Below is an image of what I'm trying to achieve.
Desired result :
HTML :
<body>
<div class="header">
THIS IS A HEADER WITH LINKS AND THINGS
</div>
<div class="content">
<div class="sidebar">
SIDE BAR WITH MORE LINKS AND THINGS
</div>
<div class="mainarea">
<div class="chatbox">
SOME SORT OF BOX WITH THINGS IN
</div>
<form>
<input name="q" placeholder="type something here"/>
<input type="submit" value="Send"/>
</form>
</div>
</div>
</body>
CSS :
body {
height: 100%;
}
.header {
height: 80px;
background-color: red;
}
.content {
width: 100%;
height: 100%;
}
.sidebar {
float: left;
width: 20%;
height: 100%;
background-color: yellow;
}
.chatbox {
width: 100%;
border-style: solid;
border-width: 1px;
}
.mainarea {
float: right;
width: 80% !important;
background-color: green;
height: 100%;
}
Demo :
JSFiddle
Instead of float:right/left for .mainarea/.sidebar use display:table-cell. Also :
body, html { height: 100%; margin:0; }
.content { width: 100%; height: calc(100% - 80px); display:table; }
JSFiddle
You could use flexbox too.
http://jsfiddle.net/tetm7/
HTML
<div class="main">
<div class="header">HEADER</div>
<div class="content">
<div class="sidebar">SIDEBAR</div>
<div class="box">TEXT BOX</div>
</div>
</div>
CSS
html, body, .main {
height: 100%;
}
body {
margin: 0;
padding: 0;
}
.header {
width: 100%;
height: 100px;
background-color: red;
}
.content {
display:flex;
flex-wrap: wrap;
justify-content: flex-start;
align-content: stretch;
align-items: stretch;
width: 100%;
height: 100%;
background-color: yellow;
}
.sidebar {
background-color: orange;
width: 200px;
}
.box {
background-color: green;
width: 300px;
flex-grow: 1;
flex-shrink: 0;
flex-basis: 0;
}