This question already has answers here:
CSS - Equal Height Columns?
(11 answers)
Closed 8 years ago.
I have a wrapper, main and aside elements inside.
I want to have:
wrapper - no fixed height, stretching to the content's height - the longer column of the 2.
aside - left column, width 30%, min-width:340px(with padding), height 100% of wrapper.
main - right column, width auto.
When I set the wrapper to position:relative and aside to position:absolute the 100% height is working, however that breaks the main element's width. Is there any other way to achieve what I need with CSS/SASS only and without being "hackish" with hidden divs and such?
.wrapper{
border:$contentborder;
background: $contentgradient;
border-radius:3px;
text-align: center;
margin: auto;
}
main{
text-align: left;
overflow-x: hidden;
}
aside{
float: left;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 30%;
min-width: 340px;
padding: 20px;
padding-left: 0;
height: 100%;
text-align: left;
}
http://jsfiddle.net/2m503b8e/
Assign some height for your parent div for instance height:209px; to your .wrapper
DEMO
You can also use min-height: value to your main and aside
You need to add a margin-left to main, that equals the width of aside:
main {
margin-left: 340px;
}
You might be interested in creating breakpoints for the min-width/width values though. For screens with viewport size of greater than 1033px, the width of aside will become 30%, so your margin-left needs to be 30%.
#media screen and (min-width: 1033px) {
main {
margin-left:30%;
}
}
Fiddle:
http://jsfiddle.net/2m503b8e/5/
There are several ways of achieving this. Probably the easiest is to make the elements display like a table:
.wrapper{
border:$contentborder;
background: $contentgradient;
border-radius:3px;
text-align: center;
margin: auto;
background:gray;
display:table; /* make this act as a table */
}
main{
text-align: left;
overflow-x: hidden;
background: red;
padding:2em;
display:table-cell; /* make this act as a table cell */
}
aside{
/*float: left; */
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 30%;
min-width: 340px;
padding: 20px;
padding-left: 0;
/* height: 100%; */
text-align: left;
background:orange;
display:table-cell; /* make this act as a table cell */
}
http://jsfiddle.net/2m503b8e/3/
Related
I asked a question today about good and bad practises in CSS/HTML/jQuery and when it is appropriate to use jQuery to set container dimensions. I got some good answers
So, understanding that jQuery is not the best option, I decided to ask maybe some of you can give some input about this "problem"
So, I have a page put together with php. I have one header for all of my pages and content is being changed with php (I am saying this only to let you guys know that wrapping header and div in one container is not an option):
include ("header.php");
include ("$lang/$section.php");
include ("footer.php");
I have a header with fixed hight (100px + 100px margin-bottom) and after that I have a div which on screens smaller than 768px(height) I want to be no longer than the remaining space. If the screen is larger, I want my div to be
max-height: 420px;
with
padding: 100px 0;
Inside of this div I have 3 floated columns. I need them to fill the space in the parent div.
What I would usually do is- use jQuery and calculate screen height and subtract header height and all the margins and paddings. But as I've learned today, that is not a good practise.
So, to wrap it up: I NEED THE DIV TO FILL THE SPACE BETWEEN HEADER AND BOTTOM OF THE SCREEN FOR VIEWPORT HEIGHT SMALLER THAN 768px. MAX-HEIGHT FOR THIS DIV IS 420px. With jQuery it is super easy but I can't figure out the clean css way.
Maybe some of you have an idea?
Here is my fiddle, so you guys don't have to type out all of the code.
Thank you in advance!
You can use calc() and vh (viewport height).
calc() browser support: http://caniuse.com/#search=calc
vh browser support: http://caniuse.com/#search=vh
So we use calc(100vh - 200px) being 100vh the height of the viewport and 200px the height of the header.
Also, we add a media query so that when the screen is bigger than 768px height we limit the height to 420px.
Try this:
header { height: 100px; background: #ccc; margin-bottom: 100px; box-sizing: border-box; }
section { width: 100%; height: calc(100vh - 200px); padding: 50px 0; background: yellow; box-sizing: border-box; }
.col1, .col2, .col3 { float: left; width: 33%; }
.colPadding { padding: 25px; background: blue; }
.cb { width: 100%; height: 1px; clear: both; }
body {
margin: 0;
}
#media screen and (min-height: 768px) {
section {
max-height: 420px;
}
}
<header>
This is my header with 100px bottom margin
</header>
<section>
<div class="col1">
<div class="colPadding">
section with padding: 50px 0; and max-height: 420px;
</div>
</div>
<div class="col2">
<div class="colPadding">
Column 2
</div>
</div>
<div class="col3">
<div class="colPadding">
Column 3
</div>
</div>
<div class="cb"></div>
</section>
Gave it a shot with CSS3 flex-box model and screen media queries. Here is my fiddle.
I used 300px instead of 764px for the fiddle. (you can change it if you want, I just used 300px so that it's easier to test)
Applied CSS
* { box-sizing: border-box; } /* force sizing based on border */
body {
display: flex; /* flex for body since wrapping header and section is not allowed */
flex-flow: column wrap;
}
header {
height: 100px;
background: #ccc;
margin-bottom: 100px;
flex: 0 0 auto; /* make header size fixed */
}
section {
width: 100%;
max-height: 420px;
padding: 50px 0;
background: yellow;
/* to occupy remaining space */
flex: 1 1 auto;
/* for columns inside to occupy full width */
display: flex;
flex-flow: row wrap;
/* for immediate children to stretch to max height possible */
align-items: stretch;
}
.col1, .col2, .col3 {
float: left;
/* to occupy remaining width */
flex: 1 0 auto;
}
.colPadding {
padding: 25px;
background: blue;
}
.cb {
width: 100%;
height: 1px;
clear: both;
}
/* Custom CSS */
/* style to apply when the screen is less than or equal to 300px (you can change this to 768px) */
#media screen and ( max-height: 300px ){
body {
height: 100vh; /* for body to have a size of the full screen */
}
header {
margin: 0px; /* remove margin bottom */
}
section {
padding: 0px; /* remove margin bottom and top/bottom padding */
margin: 0px;
}
}
More on CSS3 flex-box here.
This question already has answers here:
HTML/CSS: Making two floating divs the same height
(14 answers)
Closed 8 years ago.
I've got two columns, one with a flexible width, and one that should expand to the remaining width.
I have this set up like this:
.container {
height: auto;
overflow: hidden;
}
.right {
width: 80px;
float: right;
background: #aafed6;
position:relative; /* Needed for positioning an element absolutely inside this dib */
}
.left {
float: none; /* not needed, just for clarification */
background: #e8f6fe;
/* the next props are meant to keep this block independent from the other floated one */
width: auto;
overflow: hidden;
}
Here's the fiddle: http://jsfiddle.net/dms53yt8/
My problem is, I want the right div to have equal height as the left div. How can I do this while still preserving the current structure?
Thanks! Uri
How about using display: table for container div & display: table-cell for child divs?
Here is the edited jsfiddle - http://jsfiddle.net/dms53yt8/4/
This solution works http://jsfiddle.net/ru02qxLx/
CSS Additions
Add position: relative; to your .container class. Then add position: absolute;, top:0;, bottom:0; and right:0; to your .right class
.container {
height: auto;
overflow: hidden;
/* Added */
position:relative;
}
.right {
width: 80px;
background: #aafed6;
/* Added */
position:absolute;
top:0;
right:0;
bottom:0;
}
You can add padding-bottom and margin-bottom to both divs. please check fiddle.
.right{
padding-bottom: 500em;
margin-bottom: -500em;
}
.left{
padding-bottom: 500em;
margin-bottom: -500em;
}
DEMO
This question already has answers here:
Make a div fill the height of the remaining screen space
(41 answers)
Closed 8 years ago.
I have a header div and a div underneath it. I need the div underneath the header div to adjust depending on the height of the browser window size.
In CSS, when I add height:100% it creates a scroll bar at the side of the page. When I adjust the percentage of the width, spacing at the bottom of the page constantly changes because it is done with percentages.
I would like the div below the header to always adjust with the window size in height with no spacing at the bottom.
How do I do this?
Here is the Fiddle
JS Fiddle
I am not sure why but in JSFiddle the bottom div is not extending height: 100%
here is the code:
HTML
<div class = "main">
Header
</div>
<div class="left">
Bottom Div
</div>
CSS
.main {
width:100%;
height:60px;
border: solid;
}
.left {
height: 100%;
width: 300px;
border:solid;
}
try to use something like this code
html:
<div class = "main">
Header
</div>
<div class="left">
Bottom Div
</div>
css:
* {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
html, body {
height:100%;
}
body {
padding:60px 0 0 0; /* 60 — header height*/
margin:0;
}
.main,
.left {
border:1px solid #000;
}
.main {
width:100%;
height:60px;
margin-top: -60px; /* 60 — header height*/
}
.left {
height: 100%;
width: 300px;
}
You have a few options to achieve the layout you would like.
There are plenty of answers that address your problem from this similar question:
Make a div fill the height of the remaining screen space
However, here is my solution:
Just change your CSS a bit
body, html {
height: 100%;
padding: 0;
margin: 0;
}
.main {
width:100%;
height:60px;
border: solid;
position: absolute;
background-color: #fff;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.left {
height: 100%;
width: 300px;
border:solid;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding-top: 60px;
}
The box-sizing will prevent the padding-top and the borders from pushing the dimensions outside the browser window. The body,html height: 100%; is needed to allow other items to be 100% height (why your fiddle wouldn't work).
CSS allows you to do some basic math, so the following would help you:
Given that your header has a fixed height of 60px:
.left {
height: calc(100% - 60px);
}
Edit: you also have some extra padding and borders that you might want to take into consideration while calculating. Although I'm not a big fan of hard-coding values like that.
Try this in your style sheet
CSS
.left {
height: 100vh;
width: 100%;
border:solid;
}
Refer link
https://stackoverflow.com/questions/1622027/percentage-height-html-5-css
I am trying to force div #content to fill vertically #screen div which has fixed size and allows scrolling on horizontal axis. The problem is #header which fit its content so I am unable to set fixed height for #content. #content has columns which are horizontally scrollable.
Setting height in jQuery should be easy but I am looking for CSS-only solution.
#container {
background: #f00;
width:500px;
height:500px;
padding:10px;
overflow: auto;
}
#header {
background: #0f0;
width: 100%;
}
#content {
-webkit-column-width: 100px;
max-width: none;
height:100% ;/*can not set fixed number as #header height could change*/
}
http://jsfiddle.net/Y7sfc/2/
I'm not sure if I understand your question fully but iI'm assuming its something along the lines of you not wanting a vertical scroll bar? and only a horizontal overflow right?
I added a height: 20%; to your header (or whatever you want) and changed the height of your #content to fill the rest so in this case, height: 80%;.
#container {
background: #f00;
width:500px;
height:500px;
padding:10px;
overflow: auto;
}
#header {
background: #0f0;
width: 100%;
height: 20%;/*add up to 100%(total size) of #container along with other elements*/
}
#content {
-webkit-column-width: 100px;
max-width: none;
height: 80%% ;/*add up to 100%(total size) of #container along with other elements*/
}
I believe the problem is because your #header and #content are both inside #container which has a set amount of space. Since your #content was set to take heigh: 100% of the space inside #container the #header still had to make room thus pushing the limit above 100% and creating a vertical slide bar.
http://jsfiddle.net/Y7sfc/4/
I have a container div with a floating left-hand navigation pane and a content pane to the right:
<div id="header"></div>
<div id="container">
<div id="leftnav"></div>
<div id="content"></div>
<div class="clearfix"></div>
</div>
<div id="footer"></div>
CSS:
body
{
text-align: center; /* IE center div fix */
}
#container
{
width: 800px; /* site width */
background-color: red; /* so I can see it */
text-align: left; /* undo text-align: center; */
margin: 0 auto; /* standards-compliant centering */
}
#leftnav
{
float: left;
width: 200px;
}
#content
{
height: 100%;
width: 600px;
margin-left: 200px;
background-color: green; /* so I can see it */
}
.clearfix { clear: both; }
The #container div stretches to the full height of the floating #leftnav div, but the contained #content div does not stretch to 100% of the height. I've read elsewhere that this is due to the parent #container not having a specified height (defaults to auto) and therefore the 100% is not based on that container; however, I can't specify the height because the left navigation pane height isn't constant.
How can I get the #content div to be 100% of the height of the #container div when the #container div's height is defined by the floating #leftnav?
This is similar to the 3 column liquid "holy grail" CSS layout that has been plaguing people for years (though has been solved in the past couple years, though many of the solutions required browser hacks or Javascript to function).
I'd highly suggest you not reinvent the wheel here as it is difficult to get CSS to perform exactly as you're describing. Here is a good resource for this layout and many other similar liquid layouts:
http://matthewjamestaylor.com/blog/perfect-2-column-left-menu.htm
The easy way would be to use JS to set the height of #content to the height of #leftnav. You can use faux columns on #container and make a slice/gif of the green background and repeat it vertically on #container along with the red however you have it but I'm not sure if it fits your needs.
try this CSS
body
{
text-align: center; /* IE center div fix */
}
#container
{
width: 800px; /* site width */
background-color: red; /* so I can see it */
text-align: left; /* undo text-align: center; */
margin: 0 auto; /* standards-compliant centering */
}
#leftnav
{
float: left;
width: 200px;
}
#content
{
height: 100%;
width: 600px;
background-color: green; /* so I can see it */
float:right;
}
.clearfix { clear: both; }
I would also suggest using a line break with a clear both rather than a div.