I've searched and tried a bunch of different things. I have a variable-height tophalf, and the bottom half should fill up the remaining space. A JSfiddle:
http://jsfiddle.net/UCJmQ/
CSS:
.top {
background-color: lightblue;
height: 300px;
}
.bottom {
background-color: green;
min-height: 100px;
overflow: hidden;
height: 100%;
}
html, body {
height: 100%;
}
HTML:
<div class="top"></div>
<div class="bottom">
</div>
What I'm seeing now is the green page taking up the entire window's height, not the remaining height. How can I make it take the remaining height instead?
http://jsfiddle.net/ph35V/
<div class="wrapper">
<div class="top">
300px
</div>
<div class="bottom">
Remaining height
</div>
</div>
html, body {
height: 100%;
width: 100%;
margin: 0;
}
.wrapper {
display: table;
height: 100%;
width: 100%;
}
.top {
display: table-row;
background: lightblue;
height: 300px;
}
.bottom {
display: table-row;
height: 100%;
background: green;
}
Could also use box-sizing: border-box or conflicting absolute positions
Is that variable-height specified in CSS or not?
From the fiddle I assume it is. If that's the case, try position: absolute with left, bottom, right set to 0 and top to upper div height:
DEMO
Related
I'm trying to get my middle div #content to scroll when the height of its content exceeds the available height (as defined by the innerWidth - header height - footer height).
Instead, the div has a scrollbar that doesn't scroll, and the whole page has a scrollbar instead.
body {
margin: 0;
}
#header {
background-color: silver;
height: 100px;
width: 100%;
}
#content {
overflow: scroll;
}
#footer {
background-color: silver;
bottom: 0px;
height: 100px;
position: fixed;
width: 100%;
}
<div id="header">header</div>
<div id="content">
a<br>b<br>c<br>d<br>e<br>f<br>g<br>h<br>i<br>i<br>j<br>k<br>l<br>m<br>n<br>o<br>p<br>q<br>r<br>s<br>t<br>u<br>v<br>q<br>x<br>y<br>z<br>
a<br>b<br>c<br>d<br>e<br>f<br>g<br>h<br>i<br>i<br>j<br>k<br>l<br>m<br>n<br>o<br>p<br>q<br>r<br>s<br>t<br>u<br>v<br>q<br>x<br>y<br>z<br>
a<br>b<br>c<br>d<br>e<br>f<br>g<br>h<br>i<br>i<br>j<br>k<br>l<br>m<br>n<br>o<br>p<br>q<br>r<br>s<br>t<br>u<br>v<br>q<br>x<br>y<br>z<br>
</div>
<div id="footer">footer</div>
Give #content a fixed height, and it will work. Right now it doesn't work because #content has a dynamic height, and instead of scrolling when overflowing (because it will never overflow), it will expand.
See the snippet below.
(I set body and html to height: 100% and the height of #content to calc(100% - 200px) to fill up all the space not filled up by the header or the footer).
body, html {
margin: 0;
height: 100%;
}
#header {
background-color: silver;
height: 100px;
width: 100%;
}
#content {
overflow: scroll;
height: calc(100% - 200px);
}
#footer {
background-color: silver;
bottom: 0px;
height: 100px;
position: fixed;
width: 100%;
}
<div id="header">header</div>
<div id="content">
a<br>b<br>c<br>d<br>e<br>f<br>g<br>h<br>i<br>i<br>j<br>k<br>l<br>m<br>n<br>o<br>p<br>q<br>r<br>s<br>t<br>u<br>v<br>q<br>x<br>y<br>z<br>
a<br>b<br>c<br>d<br>e<br>f<br>g<br>h<br>i<br>i<br>j<br>k<br>l<br>m<br>n<br>o<br>p<br>q<br>r<br>s<br>t<br>u<br>v<br>q<br>x<br>y<br>z<br>
a<br>b<br>c<br>d<br>e<br>f<br>g<br>h<br>i<br>i<br>j<br>k<br>l<br>m<br>n<br>o<br>p<br>q<br>r<br>s<br>t<br>u<br>v<br>q<br>x<br>y<br>z<br>
</div>
<div id="footer">footer</div>
I'm trying to use CSS calc() to build an App Style layout with a footer at the bottom.
The main CSS players:
.content-container {
height: calc(100% - 110px);
background-color: red;
overflow: hidden;
}
.left, .right {
float: left;
height: 100%;
}
.left {
width: 70%;
background-color: blue;
}
.right {
width: 30%;
background-color: yellow;
}
.right-content {
overflow: auto;
height: 100%;
margin-bottom: 30px;
}
Here's a quick overview of the HTML:
<div class="content-container">
<div class="left">
<h1>left</h1>
</div>
<div class="right">
<div class="right-title">
TITLE OF THE SECTION
</div>
<div class="right-content">
<div class="group">
</div>
</div>
</div>
</div>
<div class="footer"></div>
Please view the full example here:
http://codepen.io/woocas/pen/MwyBGd?editors=110
I'm trying to make the overflow in the .right div (the yellow one) take the height of the .content-container.
But as you can see in the example, the scrollbar goes beyond the space allocated to it by content-container. It's behind the footer.
Any help would be greatly appreciated.
Have you tried setting the CSS heights in your right column to percentage values since they're embedded in a container they'll always present in a fit manner?
.right-title {
background-color: gray;
height: 65%;
}
.right-content {
overflow: auto;
height: 35%;
}
You could do another calc on the .right height and add a margin-bottom, so that .right will not go beyond the footer, but the whole thing seems to be a bit over-complicated.
.right {
width: 30%;
background-color: yellow;
height: calc(100% - 90px);
padding-bottom: 90px;
}
So there are 3 columns all with 100% vertical height.
left column has fixed width of 80px.
middle column and right column fill in the available space by ratio of 80% to 20%. So middle takes up 80% space, and right one takes 20% space.
right column width however if is less than 100px that it becomes fixed to 100px. min-width is 100px and max-width is 20% of available space.
I know right now there is no way to refer available vertical or horizontal space, or choose what percentage refers to...and that's why i am lost.
I can't use flexbox, and don't want to use javascript (but be sure it's not possible with css first).
This can be easily achieved using display: table and display: table-cell.
http://jsfiddle.net/Mgzbq/
HTML
<div class="table main">
<div class="cell left">left</div>
<div class="cell">
<div class="table inner">
<div class="cell center"></div>
<div class="cell right"></div>
</div>
</div>
</div>
CSS
.table {
display: table;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
vertical-align: middle;/* Keep this as top|middle|bottom, otherwise the container table of center and right div will have "vertical-align: baseline" and doesn't position properly if there is no content in center and right div*/
}
.left {
width: 80px;
background-color: #E07749;
}
.center {
width: 80%;
background-color: #E0DD49;
}
.right {
width: 20%;
min-width: 100px;
background-color: #49E0AE;
}
.main {
width: 100%;
height: 200px;
}
.inner {
width: 100%;
height: 100%;
}
Here is the demo what you want.
CSS
*{
margin: 0
}
body, html, .outer, .leftCol, .rightSec, .innerCnt{
height: 100%;
}
.leftCol {
min-height:100px;
width: 80px;
float: left;
background: red
}
.rightSec {
margin-left:80px
}
.innerCnt {
display: table;
width: 100%;
}
.midCol {
width: 80%;
background: green;
height:100px;
display: table-cell;
}
.rightCol {
min-width: 100px;
display: table-cell;
background: yellow;
height:100px;
}
I've two floated DIVs (two columns) which are nested in an "clear-float"-DIV, which itself is nested in an centered DIV ("wrapper" DIV).
<div id="content">
<div class="block2">
<div id="slot_left">
CONTENT-LEFT
</div>
<div id="slot_right">
*CONTENT-RIGHT*
</div>
</div>
</div>
The right column has min-width and max-width CSS option set. But the wrapper DIV, which has min-width and max-width also, is always expanded to max width.
#content {
min-width: 300px;
min-height: 80px;
max-width: 350px;
margin: 0 auto;
background: #c00;
}
.block {
overflow: hidden;
_overflow: visible;
_overflow-x: hidden;
_height: 0;
}
#slot_left {
width: 200px;
background: #ff0;
float: left;
position: relative;
}
#slot_right {
float: left;
background: #cc0;
min-width: 100px;
max-width: 150px;
position: relative;
}
What's the reason for that? I want the wrapper DIV to has minimum width required but to be centered on screen.
Here is an fiddle.
use display:inline-block
why this is happening?? div is by default block level element, so when you have given max-width, it will always obey it to occupy max area possible....
http://jsfiddle.net/sHB7g/3/
CSS
#content {
min-width: 300px;
min-height: 80px;
max-width: 350px;
margin: 0 auto;
background: #c00;
display:inline-block
}
.block {
display:inline-block;
overflow: hidden;
border:1px solid #000;
}
http://jsfiddle.net/sHB7g/1/
#content {
display: inline-block;
}
and then added a content wrapper
#contentwrapper {
text-align: center;
}
the html then is like this
<div id="contentwrapper">
<div id="content">
<div class="block">
<div id="slot_left">
CONTENT-LEFT
</div>
<div id="slot_right">
*CONTENT-RIGHT*
</div>
</div>
</div>
I'm having some trouble figuring out how to do this. I want to have a wrapper so my site is centered, but one of the header elements needs to stretch all the way to the right edge of the page, but without expanding the width of the page and adding scrollbars.
See here: http://i49.tinypic.com/6rkaxc.jpg (new poster so can't add image)
The blue outline represents the centered wrapper, and the orange box is the header div that I'm trying to get to fit to the right side of the page. I've got it to work using 100% width but it creates a horizontal page scroll since it's making it the same width as it's parent. I want it to expand for users that have higher resolutions so it always fits snug to the right side. I hope this makes sense.
my code looks something like...
<body>
<div id="wrapper">
<div id="header">
</div>
<div id="left">
</div>
<div id="right">
</div>
</div>
</body>
CSS:
div#wrapper {
margin: 0 auto;
width: 1020px;
position: relative;
}
div#header {
height: 150px;
position: absolute;
left: 510px;
width: 100%;
}
div#left {
width: 510px;
float: left;
}
div#right {
width: 100%;
float: left;
}
I'm pretty new to this stuff so if you notice any errors here or bad practices please point them out! Thanks for the help! :)
Since you want your content to be fixed width, a strategy would be to have containers for both left and right contents. This allows you to use width: 100% for the header which will extend to the end without scroll bars. You then make the header relative to the right container. Here is a jsfiddle you can play with.
Note I made the widths smaller so it would fit in my jsfiddle window.
HTML:
<body>
<div id="wrapper">
<div id="leftContainer">
<div id="left">
This is left
</div>
</div>
<div id="rightContainer">
<div id="header">
This is a header
</div>
<div id="right">
This is right
</div>
</div>
</div>
</body>
CSS:
div#wrapper {
text-align: center;
width: 100%;
position: relative;
white-space: nowrap;
overflow-x: scroll;
}
div#header {
z-index: 1000;
height: 150px;
position: absolute;
left: 0;
width: 100%;
background: green;
}
div#leftContainer {
float: left;
width: 50%;
height: 500px;
display: inline-block;
}
div#left {
float: right;
width: 260px;
height: 300px;
background-color: purple;
}
div#rightContainer {
position: relative;
float: right;
width: 50%;
height: 500px;
display: inline-block;
}
div#right {
width: 260px;
height: 300px;
background-color: yellow;
}
Try this one. I changed the wrapper width to 80%. Not sure if that's ok. But I works well when expanding the page. Moved the header outside of wrapper and also added background color for clarity.
Note 1: right DIV's margin-top is same size as header DIV's height.
HTML
<div id="outerWrapper">
<div id="header">
Header
</div>
<div id="wrapper">
<div id="left">
Left
</div>
<div id="right">
Right
</div>
</div>
</div>
CSS
div#wrapper {
margin: 0 auto;
width: 80%;
height: 100%;
position: relative;
background-color: #CCCCCC;
}
div#header {
height: 150px;
float: right;
position: absolute;
left: 50%;
width: 50%;
background-color: yellow;
}
div#left {
width: 50%;
height: 100%;
float: left;
background-color: red;
}
div#right {
width: 50%;
height: 100%;
float: left;
margin-top: 150px;
background-color: blue;
}
Hope this helps.