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/
Related
I am wondering, if there are any alternative/better ways to create this dashboard layout with flex or maybe grid? So I wouldn't need to add this pusher with 200px margin.
I heard about that it can be done using flex 1 1 0% or something like that, I am not sure how to implement it.
body {
margin: 0;
}
.content {
display: flex;
}
.sidebar {
position: fixed;
left: 0;
width: 200px;
background: red;
height: 100vh;
overflow-y: auto;
}
.body {
background: blue;
flex: 1;
height: 100vh;
}
.pusher {
margin-right: 200px;
}
.nav{
background: yellow;
height: 60px;
}
<div class="content">
<div class="sidebar"></div>
<div class="pusher">
</div>
<div class="body">
<div class="nav">
Nav
</div>
test
</div>
</div>
Here you go...
I removed the div with class="pusher" and changed/added the CSS as follows:
.sidebar {
width: 20vw;
}
.body {
position: absolute;
width: 80vw;
right: 0;
}
Basically, I made the div class="sidebar" and the div with class="body" make up to 100 % of the screen but in different relative units, i.e. vw (20 vw + 80 vw = 100 vw). So, now I just needed to add right: 0; to the div with class="body" in order to achieve the exact same result as you did with margin-right: 200px;. I also added position: absolute; to the div with class="body", otherwise it won't work.
See the snippet below.
body {
margin: 0;
}
.content {
display: flex;
}
.sidebar {
position: fixed;
left: 0;
width: 20vw;
background: red;
height: 100vh;
overflow-y: auto;
}
.body {
position: absolute;
background: blue;
height: 100vh;
width: 80vw;
right: 0;
}
.nav {
background: yellow;
height: 60px;
}
<div class="content">
<div class="sidebar"></div>
<div class="body">
<div class="nav">Nav</div>
<div>test</div>
</div>
</div>
Hi I change your HTML and CSS code and I do my best for you.
HTML CODE:
<div class="main">
<div class="sidebar">This is Sidebar</div>
<div class="content">
<div class="nav">
Nav
</div>
<div class="content-body">
test
</div>
</div>
</div>
CSS Code:
body {
margin: 0;
}
.main{
display: flex;
width: 100vw;
}
.sidebar {
left: 0;
width: 200px;
background: red;
height: 100vh;
}
.content {
display: flex;
flex-direction: column;
width: 100vw;
background: #ddd;
height: 100vh;
}
.nav{
background: yellow;
height: 60px;
}
.content-body {
background: blue;
height: 100vh;
}
I'm trying to do a container with rounded corners, basically it will have a rounded corner on the top-left of the header(red) and then it should have it on the bottom left of the view that we have....
so what it is hard for me is the following:
the bottom border should be rounded if it is the end of the page
the border should keep straight if it isn't the end of the page.
so what I have is the following, if you see this example, the bottom left corner is rounded because the content (yellow) is not bigger than 100% therefore we show the rounded corner and also we complete the view so the corner is stick to the bottom.
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
background: black;
}
.header {
height: 25px;
margin-left: 20%;
width: 80%;
background: red;
border-top-left-radius: 10px;
}
.main {
display: block;
height: calc(100% - 25px);
margin-left: 20%;
width: 80%;
background: green;
overflow: scroll;
border-bottom-left-radius: 10px;
overflow-x: hidden;
}
.content {
height: 30px;
width: 100%;
background: yellow;
}
<body>
<div class="header">
header
</div>
<div class="main">
<div class="content"></div>
</div>
</body>
the problem is when the content is bigger than the main as you can see, it will always be rounded as the following example and the height of the content is larger than the main so it should continue the line and show the corner only if the user scrolls down
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
background: black;
}
.header {
height: 25px;
margin-left: 20%;
width: 80%;
background: red;
border-top-left-radius: 10px;
}
.main {
display: block;
height: calc(100% - 25px);
margin-left: 20%;
width: 80%;
background: green;
overflow: scroll;
border-bottom-left-radius: 10px;
overflow-x: hidden;
}
.content {
height: 900px;
width: 100%;
background: yellow;
}
<body>
<div class="header">
header
</div>
<div class="main">
<div class="content"></div>
</div>
</body>
I also did some test using the rounder corner on the content, but if the content is smaller it will show the rounded corner in the wrong place.
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
background: black;
}
.header {
height: 25px;
margin-left: 20%;
width: 80%;
background: red;
border-top-left-radius: 10px;
}
.main {
display: block;
height: calc(100% - 25px);
margin-left: 20%;
width: 80%;
background: green;
overflow: scroll;
overflow-x: hidden;
border: 1px solid violet;
}
.content {
height: 90px;
width: 100%;
background: white;
border-bottom-left-radius: 10px;
border: 1px solid red;
}
<body>
<div class="header">
header
</div>
<div class="main">
<div class="content"></div>
</div>
</body>
I'm not the best at scss(clearly :P) so I would appreciate your help.
is there a way to achieve this with only css or should I just use javascript?
another newbie question here. Learning CSS. I am trying to do something that I thought would be very simple, but have not managed to find the way to do it, or a suitable answer to the question.
I have a simple project with a header, some content and a footer. The content has a div with a white border and an image inside it. I would like the div to be as wide as the image and no wider. I have provisionally set the width to 430px, but I would like to know the code to set the width to whatever the width of the image is.
Code
html
html,
body {
margin: 0px;
padding: 0px;
height: 100vh;
}
#header {
position: relative;
height: 10%;
width: 100%;
background-color: lightgray;
}
#footer {
position: relative;
height: 10%;
width: 100%;
background-color: lightgray;
}
#container {
height: 80%;
width: 100vw;
background-color: red;
}
#imagewrap {
position: relative;
border: 1px solid white;
width: 430px;
display: block;
margin: 0 auto;
top: 50%;
transform: translateY(-50%);
}
<div id="header"> </div>
<div id="container">
<div id="imagewrap">
<img src="Images/01Folder/Image.jpg" height="100%" id="front" />
</div>
</div>
<div id="footer"> </div>
Add display: inline-block; to your .imagewrap without setting it's width.
.imagewrap {
display: inline-block;
}
If you want a div with an image to be centered, add another div around them with:
.wrapper {
display: flex;
justify-content: center;
align-items: center;
}
But do you really need that div around an image? The border might be added to an image itself without additional div.
If you want a border on the image, add it there
html,
body {
margin: 0px;
padding: 0px;
height: 100vh;
}
#header {
position: relative;
height: 10%;
width: 100%;
background-color: lightgray;
}
#footer {
position: relative;
height: 10%;
width: 100%;
background-color: lightgray;
}
#container {
height: 80%;
width: 100vw;
background-color: red;
}
#imagewrap {
position: relative;
/*border: 1px solid white;
width: 430px;
display: inline-block;
line-height: 0;
margin: 0 auto;*/
top: 50%;
transform: translateY(-50%);
text-align: center; /*center image horizontally*/
}
#imagewrap img {
border: 1px solid white;
}
<div id="header"> </div>
<div id="container">
<div id="imagewrap">
<img src="https://unsplash.it/100/100" height="100%" id="front" />
</div>
</div>
<div id="footer"> </div>
Check out this fidde:
https://jsfiddle.net/56myv9g2/1/
#imagewrap img{
display:block;
}
#imagewrap{
position: relative;
border: 1px solid white;
display: inline-block;
margin: 0 auto;
top: 50%;
transform: translateY(-50%);
}
#container {
height: 80%;
width: 100vw;
text-align:center;
background-color: red;
}
Also, you could just give the border to the image tag all along without the div
If you set display: inline-block, then you need to add text-align: center to container
html,
body {
margin: 0px;
padding: 0px;
height: 100vh;
}
#header {
position: relative;
height: 10%;
width: 100%;
background-color: lightgray;
}
#footer {
position: relative;
height: 10%;
width: 100%;
background-color: lightgray;
}
#container {
text-align: center;
height: 80%;
width: 100vw;
background-color: red;
}
#imagewrap{
position: relative;
border: 1px solid white;
width: 430px;
display: inline-block;
top: 50%;
transform: translateY(-50%);
}
<div id="header"> </div>
<div id="container">
<div id="imagewrap">
<img src="Images/01Folder/Image.jpg" height="100%" id="front" />
</div>
</div>
<div id="footer"> </div>
I am trying to wrap my right div around my left, in an inverse moon shape? Here's what it looks like right now.
What I want to do is have the red block wrap around the rounder corners of the black block. Here is the current HTML/CSS code, I apologize if the CSS code is a little "messy" as i have been experimented different codes.
HTML
<div class="container full-width">
<div class="row proj">
<div class="col-md-8 full-width">
<div class="content">
</div>
</div>
<div class="col-md-4 full-width">
<div class="options">
</div>
</div>
</div>
</div>
CSS
.content {
margin-top: 75px;
position: relative;
width: 70vw;
max-width: 100%;
height: 90vh;
max-height: 100%;
overflow: hidden;
background-color: black;
border-radius: 0 50vw 50vw 0;
}
.options {
margin-top: 75px;
position: relative;
width: 30vw;
max-width: 100%;
height: 90vh;
max-height: 100%;
overflow: hidden;
background-color: red;
}
.container .full-width{
padding-left: 0;
padding-right: 0;
overflow-x: hidden;
}
UPDATE
Answer Found, thanks for the help, so had to tweak the code a bit from your posted code, it looks like this now.
.content {
margin-top: 75px;
width: 30vw;
height: 90vh;
overflow: hidden;
background-color: black;
border-radius: 0 50vw 50vw 0;
float:left;
position:relative;
z-index:2;
}
.options {
margin-top: 75px;
margin-left:3%;
position:relative;
float:right;
width: 30vw;
height: 90vh;
max-height: 100%;
overflow: hidden;
background-color: red;
}
.container .full-width{
position: absolute;
padding-left: 0;
padding-right: 0;
}
and the final result looks like this, will tweak the positioning some more but the result is what i wanted, thanks again.
UPDATE 2
Ok, had to make another edit, for some reason I had to float them both left. OTherwise if i kept the red div float right and tried to expand its width, it would expand to the left, any idea why? current code:
.content {
margin-top: 75px;
width: 44vw;
height: 90vh;
overflow: hidden;
background-color: black;
border-radius: 0 50vw 50vw 0;
float:left;
position:relative;
z-index:2;
}
.options {
margin-top: 75px;
margin-left:20%;
position:relative;
float:left;
width: 50vw;
height: 90vh;
max-height: 100%;
overflow: hidden;
background-color: red;
}
.container .full-width{
position: absolute;
padding-left: 0;
padding-right: 0;
}
Use position:relative; for content and position:absolute; for options
.content {
width: 30vw;
height: 90vh;
overflow: hidden;
background-color: black;
border-radius: 0 50vw 50vw 0;
float:left;
position:relative;
z-index:2;
}
.options {
margin-left:3%;
position:absolute;
float:right;
width: 30vw;
height: 90vh;
max-height: 100%;
overflow: hidden;
background-color: red;
}
<div class="container full-width">
<div class="row proj">
<div class="col-md-8 full-width">
<div class="content">
</div>
</div>
<div class="col-md-4 full-width">
<div class="options">
</div>
</div>
</div>
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/