I have some basic markup like this:
<body>
<div id="static-container">
<p id="do-not-move">Example.</p>
</div>
<div id="scroll-container"></div>
</body>
Basically, I want the static-container to remain fixed, and never move. The scroll-container will have content added to it and will be scrollable, but it should always be physically below the static-container, and scrolling should never overlap into static-container, I can put position: fixed in the static-container but the scroll-container still manages to scroll into it.
body,html {height:100vh;}
body {
display: flex;
flex-direction: column;
margin: 0;
}
#static-container {
background: black;
color: white;
}
#scroll-container {
flex-grow: 1;
overflow-y: scroll;
}
<div id="static-container">
<p id="do-not-move">Example.</p>
</div>
<div id="scroll-container"><p>foo</p><p>foo</p><p>foo</p><p>foo</p><p>foo</p><p>foo</p><p>foo</p><p>foo</p><p>foo</p><p>foo</p><p>foo</p><p>foo</p><p>foo</p><p>foo</p><p>foo</p><p>foo</p><p>foo</p><p>foo</p></div>
Make the static-container div position fixed and some height.
Give some height to scroll-div and scroll-y: scroll
HTML:
<div id="static-container">
<p id="do-not-move">Example.</p>
</div>
<div id="scroll-container">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ut ipsum rutrum, commodo felis ac, mattis justo. Vivamus feugiat urna ac est efficitur blandit. Maecenas vestibulum turpis ante, nec pharetra enim rutrum vitae. Fusce pharetra felis fringilla tincidunt porta. Praesent porttitor posuere erat eu viverra.
</p>
<p>
Aliquam lacus nisl, dictum non ultricies eget, malesuada et nisi. Maecenas felis turpis, blandit at leo id, efficitur pellentesque velit. Morbi sapien augue, sagittis eget dictum a, bibendum ut dui. Morbi vulputate tempor tortor, id blandit lorem vulputate id. In blandit nibh sit amet ante vestibulum volutpat.
</p>
<p>
Nam quis nisi magna. Sed lacinia id quam eget gravida. Donec vitae luctus leo. Sed efficitur sapien eu elit tincidunt, eu vehicula felis rutrum. Interdum et malesuada fames ac ante ipsum primis in faucibus.
</p>
</div>
CSS:
#static-container{background-color:#333;color:#FFF;height:30px; padding:10px 0; postion:fixed; top:0; text-align:center; width:500px}
#scroll-container{background-color:#ccc;height:200px; position:relative; overflow-y:scroll; padding:0 10px; width:480px}
JS Fiddle
Related
I have some HTML that looks like this: https://jsfiddle.net/9uwmxLa8/
I can't get the footer to stay at the bottom and not overlap the text on the page. The footer should stay at the bottom of the page if there isn't enough content to force the footer below the window height. I have the first part right--but can't get it to not overlap; I know it's because of position: absolute--but everything I search online tells me this is necessary.
I want it to function like this: https://codepen.io/cbracco/pen/zekgx
Any ideas how to fix this?
<div class="container">
<div>
<h1>This is some long test content.</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eget sapien risus. Cras eleifend, diam quis tempus mattis, nunc leo vulputate metus, et rhoncus elit libero ac nisl. In ligula lectus, ultricies in pretium eget, accumsan non turpis. Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Praesent finibus molestie ultricies. Vivamus et libero et mauris rutrum hendrerit sed in leo. Fusce luctus lorem iaculis, mattis felis non, suscipit nisi. Integer tempus blandit est tempus ullamcorper.
Ut at risus eget arcu congue rhoncus sit amet pharetra turpis. Maecenas ultricies, ex eget egestas scelerisque, ante ipsum placerat mauris, vitae porta felis mauris dictum nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<p>
Duis fringilla dolor a neque laoreet tristique. Donec non feugiat orci. Nulla nulla mauris, fermentum at arcu quis, venenatis consectetur odio. Vestibulum a risus non lorem ullamcorper sollicitudin. Praesent quis ante ipsum. Suspendisse odio ligula, tincidunt
vitae consectetur vel, posuere tincidunt odio. Donec at mollis neque. Sed ex felis, aliquam sed turpis eget, porta aliquet justo. Vivamus vestibulum libero id pulvinar egestas.
</p>
<p>
Quisque vestibulum urna eu blandit consectetur. Integer eget massa suscipit, scelerisque augue sed, mattis erat. Proin ut tincidunt nisi. Duis vestibulum congue accumsan. Vivamus a nisi tellus. Proin pretium neque eros, quis lacinia nisl pulvinar eget.
Quisque commodo urna eu nibh vulputate accumsan. Sed nec neque blandit, commodo metus sed, hendrerit orci. Nullam ullamcorper libero massa, vel pretium felis vulputate sed. Mauris in mauris pretium, accumsan erat quis, dapibus lacus.
</p>
<p>
Quisque arcu metus, ultricies sed urna a, gravida aliquam mauris. Nullam quis velit odio. Pellentesque dignissim odio tortor, at tempus nunc posuere et. In consequat eros a nunc varius, quis varius metus malesuada. Mauris viverra auctor elit quis hendrerit.
Donec risus ante, viverra et ante a, egestas faucibus purus. Integer semper id nulla eget vehicula. Aliquam a egestas leo. Suspendisse eu magna sit amet eros tempor ultrices. Quisque sed tempor purus, vitae egestas nunc. Cras congue nulla in sem
eleifend, sed pharetra ipsum volutpat. Etiam suscipit lacus ultricies dolor hendrerit fermentum. Pellentesque vestibulum in tellus ac blandit. In nec elit non eros tincidunt semper. Fusce sed leo eget ex laoreet fermentum sed vitae nibh. Aliquam
aliquam erat magna, sit amet gravida neque aliquam ac.
</p>
<p>
Phasellus vehicula, libero eget tempus tristique, lectus felis ornare erat, sit amet semper sapien sem ac nisl. Sed dignissim vulputate mauris, id imperdiet tellus tincidunt id. Proin eget risus a enim convallis pulvinar. In bibendum augue in tellus fermentum
sollicitudin. Proin finibus tellus lacinia hendrerit faucibus. Curabitur congue aliquam eros non condimentum. Nullam justo ex, pulvinar ac fringilla nec, ullamcorper in lorem ullamcorper in lorem ullamcorper in lorem. Quisque vestibulum urna eu
blandit consectetur.
</p>
</div>
<div class="footer">
<div>
This is a footer
</div>
</div>
</div>
SCSS:
p {
margin: 0 auto;
padding-top: 32px;
max-width: 75%;
font-size: 1.5em;
}
.container {
min-height: 100%;
position: relative;
}
.footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
background-color: cyan;
text-align: center;
}
position: absolute takes the element out if the normal layout. You then use left, right, and bottom to stick the footer to the bottom, essentially putting it over the bottom of the page.
By taking out those lines, my fiddle seems to above what you're wanting. If you want the footer to not have a margin, turn the margin to 0. Absolute positioning is not how that's done.
https://jsfiddle.net/kLqp3my7/
Make the body 100% of your page, with a min-height of 100% too.
The footer is then given negative margin-top:
#footer {
clear: both;
position: relative;
z-index: 10;
height: 3em;
margin-top: -3em;
}
You can create a footer that will stick to the bottom of the page fairly easy using flexbox
set the .container to be a flex container with display: flex;, and stack the flex items in a column with flex-direction: column;
then set the main content to flex: 1 which is shorthand for
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;
this will make it so that it will grow to fill the space, which will push the footer to the bottom of the page.
When the main content hits the footer, it will push the footer off the page since its in a flex container.
$(".add-section").on("click", function(){
$("main").append("<div class='section s3'>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.</div>");
});
* {
box-sizing: border-box;
}
html, body {
font-weight: 300;
font-size: 16px;
padding: 0;
margin: 0;
height: 100%;
}
.wrap {
display: flex;
min-height: 100%;
flex-direction: column;
}
header {
background: grey;
}
header .logo {
padding: 1.4rem;
font-size: 2rem;
}
main {
flex: 1;
}
.section {
font-size: 1.1rem;
padding: 1rem 2rem;
margin: 0;
background: #ccc;
}
footer {
background: grey;
padding: 1.2rem 1.4rem;
font-size: 1.2rem;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<div class='wrap'>
<header>
<div class='logo'>
Flexbox Footer
</div>
</header>
<main>
<div class='section s1'>
<button class='add-section'>Add Section</button>
</div>
<div class='section s2'>
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
</div>
</main>
<footer>
Footer
</footer>
</div>
I have a full height hero unit set using 100vh along with a fixed position header.
<div class="header">
This is a fixed position header
</div>
<div class="first_section_container">
<div class="first_section">
<div class="first_section_content">
<span>
This is some test content that I would like to be vertically centered, the fixed position header is causing me some problems
</span>
</div>
</div>
</div>
https://jsfiddle.net/dfn1m4kk/
I am trying to get the span to be vertically centered in the first_section div and to take into account the height of the fixed position navigation bar.
Try this
html, body{
width:100%;
height:100%;
margin:0;
padding:0;
}
.header{
background:green;
height:50px;
width:100%;
position:fixed;
text-align:center;
color:white;
top: 0;
}
.first_section_container{
height:100%;
}
.first_section{
height: calc(100vh - 50px);
background:#58585a;
margin-top: 50px;
}
.first_section_content{
height:100%;
display: table;
margin: 0 auto;
}
.first_section_content span{
display: table-cell;
width:400px;
vertical-align: middle;
text-align: center;
}
<div class="header">
This is a fixed position header
</div>
<div class="first_section_container">
<div class="first_section">
<div class="first_section_content">
<span>
This is some test content that I would like to be vertically centered, the fixed position header is causing me some problems
</span>
</div>
</div>
</div>
<div class="second_section">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nisl dui, gravida sed nisi id, sollicitudin placerat sapien. Nulla facilisi. Praesent sodales lorem quis est pulvinar, at consectetur ipsum tempus. Sed a lacus bibendum, ultrices odio non, fermentum nisl. Proin erat leo, venenatis in velit sed, molestie luctus nunc. Suspendisse quis aliquet odio. Etiam commodo nec neque quis viverra. Etiam nec justo ipsum. Morbi condimentum ipsum feugiat tincidunt semper.
</p>
<p>
Ut vestibulum nulla dapibus vestibulum efficitur. Fusce vel augue ac est iaculis elementum vel et risus. Fusce imperdiet lacus eget lorem sodales consequat. Morbi porta risus sit amet massa auctor, vel rutrum augue porta. Quisque interdum est at ex placerat iaculis id sit amet felis. Maecenas accumsan turpis mattis nisi porttitor aliquet. Suspendisse suscipit magna vitae aliquet placerat. Nullam a facilisis mauris. Praesent ut orci vehicula, aliquet arcu eu, tempor arcu. Maecenas congue dui nisl, quis ultrices arcu aliquam ut. Pellentesque quis tincidunt mi. Duis rhoncus felis at mauris vestibulum malesuada.
</p>
<p>
Nam in porttitor metus. In tristique, leo vitae facilisis facilisis, eros felis ornare neque, nec mollis velit sapien sit amet mauris. Fusce iaculis purus orci, id vehicula nisi facilisis in. Aliquam id nunc ac nisi feugiat cursus. Aliquam id orci at risus malesuada laoreet feugiat et mi. Integer laoreet lobortis nibh gravida euismod. Nulla facilisi.
</p>
<p>
Phasellus maximus lacus quis ipsum tincidunt, ac dapibus turpis dignissim. Nunc sed odio ut arcu venenatis pharetra. Sed vel justo magna. Cras sagittis rutrum dapibus. Mauris quis dictum arcu, eu finibus felis. Nam dictum nibh gravida, mattis massa ac, varius urna. Vestibulum sodales ornare justo. Proin ac scelerisque odio, at euismod arcu. Quisque suscipit rhoncus porttitor.
</p>
<p>
Donec mattis vestibulum lorem a pellentesque. Duis ut iaculis enim, a hendrerit felis. Proin finibus, leo non ornare elementum, nibh velit malesuada elit, eget pellentesque mauris nisl eu dolor. Morbi quis lobortis nisi. Proin convallis ipsum sed gravida dapibus. Aliquam fringilla ipsum vitae varius ornare. Pellentesque neque libero, congue ac lorem eget, faucibus fringilla risus. Integer semper, elit et posuere sagittis, est ante rutrum ligula, sed ornare magna ipsum et nibh.
</p>
</div>
One way to achieve this is to use flexbox.
Simply add:
.first_section_content{
height:100%;
display: flex;
justify-content: center; /* align horizontal */
align-items: center; /* align vertical */
}
Here is your fiddle updated
Be mindful that flexbox isn't 100% supported. For information on which browsers do support it, you may look here.
Another yet variant of doing this is by:
.first_section_content span{
text-align:center;
width:400px;
position:relative;
top:45%;
}
Make sure you fix the header top:0; and Hero margin-top to height of the header too.
I built the same hero using this solution on this link
Here is your solved jfiddle
I used this code to print a table using JSTL. The table was in the contentFrame div. However, the footer which was initially at the bottom started to float and overlap with the contentFrame. I don't want to keep the footer in a fixed position though. Is there a way to keep it at the bottom of the page such that when new content is added it is "pushed" down?
body {
background-color: blue;
}
#contentFrame {} #date {
float: left;
}
#logOutFrame,
#contentFrame,
#headerFrame,
#menuFrame {
background-color: red;
}
#headerFrame {
margin-top: 30px;
}
#logOutFrame {
left: 0px;
position: absolute;
text-align: right;
top: 0px;
width: 100%;
}
#footerFrame {
background-color: orange;
bottom: 0px;
left: 0px;
position: absolute;
text-align: center;
width: 100%;
}
<div id="logoutFrame">
<span id="date"> Date </span>
<span id="userEmail"> blah#email.com </span>
<a id="signOutLink" href="#"> Sign Out </a>
</div>
<div id="headerFrame">
<h1>Pointwest Logo</h1>
</div>
<div id="menuFrame">
<ul>
<li>A</li>
<li>B</li>
</ul>
</div>
<div id="contentFrame">
// content
</div>
<div id="footerFrame">
<p>footer</p>
</div>
EDIT: used the sticky footer from bootstrap and it worked
One way to solve this is:
Give the #footerFrame a default position: absolute
Use .js to monitor the height of the browser viewport and the height of the #contentframe
If #contentframe height exceeds the remaining viewport height, change #footerFrame to position: relative
function positionFooter() {
var contentFrame = document.getElementById('contentFrame');
var footerFrame = document.getElementById('footerFrame');
var contentY = contentFrame.offsetTop;
var contentHeight = contentFrame.clientHeight;
var viewportHeight = window.innerHeight;
var footerHeight = footerFrame.clientHeight;
if ((contentY + contentHeight) > (viewportHeight - footerHeight)) {
footerFrame.style.position = 'relative';
}
else {
footerFrame.style.position = 'absolute';
}
}
window.addEventListener('load',positionFooter,false);
window.addEventListener('resize',positionFooter,false);
body {
background-color: blue;
}
#contentFrame {
height: 300px;
}
#date {
float: left;
}
#logOutFrame,
#contentFrame,
#headerFrame,
#menuFrame {
background-color: red;
}
#headerFrame {
margin-top: 30px;
}
#logOutFrame {
left: 0px;
position: absolute;
text-align: right;
top: 0px;
width: 100%;
}
#footerFrame {
display: block;
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
height: 50px;
background-color: orange;
text-align: center;
}
body, #contentFrame, #footerFrame, #footerFrame p {
margin: 0;
padding: 0;
}
<div id="logoutFrame">
<span id="date"> Date </span>
<span id="userEmail"> blah#pointwestcom.ph </span>
<a id="signOutLink" href="#"> Sign Out </a>
</div>
<div id="headerFrame">
<h1>Pointwest Logo</h1>
</div>
<div id="menuFrame">
<ul>
<li>A</li>
<li>B</li>
</ul>
</div>
<div id="contentFrame">
// content
</div>
<div id="footerFrame">
<p>footer</p>
</div>
You should use <div style="clear:both;"></div> to clear float before footer this way:
<div style="clear:both;"></div>
<div id="footerFrame">
<p>footer</p>
</div>
but no need to make position of footerFrame absolute:
#footerFrame {
background-color: orange;
text-align: center;
width: 100%;
}
and TO LEARN MORE ABOUT FLOATS check this out:
https://css-tricks.com/all-about-floats/
How big is your content?
If you remove the 'position: absolute;' or 'bottom: 0px;' from the #footerFrame css, the footer will move up to position itself under the page content.
If your content isn't big enough to fill the window, this may not be desired.
There is a number of footer solutions already on SO if you search for them that will show you the many ways you can achieve a footer solution that will work for you.
EDIT NOTE: this answers a different question, as I thought the header/footer needed to be in a fixed position. Left here for usefulness based on question title, but otherwise incorrect.
If you're able to accurately declare the height of your header and footer, this is exactly what position:fixed was made for.
NOTE: I only used [attribute] selectors for speed of creating the demo! Use classes instead in your actual production code- it's what classes are for, and doesn't run the risk of getting blasted by some shiny new feature at some point in the future!
http://dabblet.com/gist/a633128f55dbcc160ecc
[head]{
position:fixed;
width:100%;
top:0px;
height:20px;
background-color:#ccc;
}
[foot]{
width:100%;
position:fixed;
bottom:0px;
height:20px;
background-color:#ccc;
}
[cont]{
/*set the top margin to the height of the header, plus a bit of buffer*/
/*set the bottom margin to the height of the header, plus a bit of buffer*/
margin:25px 0 25px;
}
<div head>
This is a header
</div>
<div foot>
This is a footer
</div>
<div cont>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque lobortis dui eget ex ullamcorper, id hendrerit lectus semper. Etiam aliquam lacus posuere, tempus quam et, tempus sapien. Sed vitae lobortis urna. Nulla at augue libero. Morbi cursus quam non velit commodo tincidunt. Nulla facilisi. Quisque vitae ante a massa scelerisque accumsan vitae in nibh. Mauris quam augue, gravida et rutrum sit amet, sodales et neque. Proin ullamcorper vulputate mi, ut suscipit nisi pharetra at. Aenean nibh orci, auctor id ex eu, molestie tincidunt velit. Praesent pretium ipsum finibus tortor pretium mollis. In et quam sodales, fermentum metus eget, volutpat lectus. Cras suscipit ipsum ut lectus placerat, vitae eleifend turpis varius. In consectetur nisl semper, maximus urna at, laoreet diam. Sed efficitur eleifend lectus, venenatis sollicitudin eros auctor nec.</p>
<p>Nunc egestas non diam id lobortis. Phasellus rhoncus, turpis interdum fermentum aliquet, risus enim commodo turpis, ac vestibulum massa neque vitae leo. Praesent non consequat leo, nec dignissim eros. Nullam convallis posuere ligula, eu tincidunt eros posuere vitae. Suspendisse vel fringilla metus, sit amet pellentesque justo. Donec feugiat elit in laoreet sagittis. Duis eget metus tellus. Suspendisse sollicitudin commodo dolor consequat efficitur. Nulla molestie leo at velit sagittis, vitae dictum eros gravida. Sed fringilla egestas ipsum, nec vulputate metus ornare in. Aenean et magna quis ante sodales posuere a pharetra purus. Sed malesuada nulla vitae eros lobortis, quis molestie lacus aliquam. Suspendisse eget arcu eu ex sollicitudin tempor ut eu ante. Aliquam mollis velit non elementum malesuada. Curabitur vehicula eu tellus sed tincidunt. Donec consequat neque id sapien venenatis, eget accumsan enim lacinia.</p>
<p>Nunc pellentesque nibh vitae quam aliquam pulvinar. Curabitur viverra odio quis purus commodo, in consequat nisi interdum. Morbi bibendum metus a mauris mattis, et laoreet erat eleifend. Morbi venenatis dapibus lorem, vitae egestas odio varius ac. Praesent id scelerisque ligula. Nullam dictum, metus sed fringilla sagittis, lacus magna bibendum metus, eget maximus ligula purus ac lectus. Vestibulum auctor sodales odio, ac gravida mauris pharetra quis. Etiam tincidunt pharetra lectus, ornare tempor augue ultricies in. Nulla tincidunt tempor eros. Aliquam ornare lorem dui, non pharetra orci elementum vitae. Nunc viverra consectetur orci, id dictum quam sodales a. Nullam vulputate orci nec luctus scelerisque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In at facilisis augue. Aenean ullamcorper ex a enim lacinia suscipit.</p>
<p>Phasellus condimentum risus ut rutrum dapibus. Phasellus nec porta orci. Pellentesque laoreet odio at elementum tincidunt. Sed venenatis dui libero, quis fermentum nibh euismod quis. Proin sit amet tellus lorem. Ut egestas enim nec est sollicitudin pellentesque. Donec consequat luctus mi at mattis. Praesent pharetra mattis dolor non aliquam.</p>
<p>Phasellus libero eros, venenatis quis rutrum posuere, feugiat ac tellus. Phasellus et dolor nibh. Proin in erat mauris. Sed dictum mi sit amet tellus iaculis vulputate ut quis ex. Integer facilisis sed ante a euismod. Pellentesque sem felis, venenatis sit amet est id, cursus facilisis felis. Morbi commodo risus lectus, ac scelerisque velit iaculis ac. Nunc dignissim est nec lorem maximus, sit amet consectetur leo efficitur. Morbi sit amet diam augue. Ut nec magna a sapien dictum dapibus. </p>
</div>
If you're unable to declare the heights, well... you can fake it by including an exact copy of your header and footer without the position:fixed; but with visibility:none; above and below your content (respectively). Note that depending on how you do this, why the size is non-declarable, and what your header/footer contains, this may or may not be viable.
A less hacky way would be to add the margins with js based on the display size of your header/footer. I would actually suggest doing this instead, so long as the target browsers can support it.
If you want the footer to only marry the bottom if the content goes past it, you'll have to use js to detect the window size and default the footer/header to relative. If the window overflows, switch to fixed.
In html \ css, I've got a div element that can appear at different y positions of a page (conditional to the populated html above it). Problem occurs when content of the div rendered is too tall. In that case I'd like the div to expand to at most the page's height (e.g. based on screen resolution) and add a scrollbar to match its content.
Is there any pure html \ css solution for this, without using js?
Attached is an example of the div structure. Notice that I'd like to have a scroll inside the big blue div, without tying to a specific height, as I do not know in advance what are the given sizes (they're dynamic).
http://jsbin.com/jaboxoneju/edit?html,output
Here is a flexbox layout that causes the second div to scroll when its height would exceed the height of the window.
Live Demo:
html, body {
margin: 0;
padding: 0;
}
html, body, #container {
width: 100%;
height: 100%;
}
#container {
display: flex;
flex-direction: column;
}
#upper {
background-color: red;
}
#scrolling {
background-color: blue;
flex-grow: 1;
overflow: auto;
}
<div id="container">
<div id="upper"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ultricies nisl lacus, sit amet viverra magna scelerisque a. Morbi rutrum quam a tellus fermentum, vel ultricies ligula dignissim. Nam bibendum nisi in metus bibendum, sit amet tristique massa molestie.</p></div>
<div id="scrolling"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ultricies nisl lacus, sit amet viverra magna scelerisque a. Morbi rutrum quam a tellus fermentum, vel ultricies ligula dignissim. Nam bibendum nisi in metus bibendum, sit amet tristique massa molestie. Quisque pretium arcu non magna pretium, nec fringilla augue pretium. Etiam a tellus ipsum. Curabitur ultrices vel nibh sit amet feugiat. Etiam consequat id ligula eget suscipit. Vestibulum sagittis tincidunt quam porta eleifend. Suspendisse interdum metus et tellus maximus dapibus. Phasellus vel bibendum leo, eu faucibus nisi. Sed vestibulum interdum arcu, et sodales diam cursus vel. Aliquam tristique lorem posuere tortor aliquet, sit amet pharetra lectus tristique. Maecenas consectetur laoreet tellus. Proin interdum tincidunt ex non commodo. Morbi non tristique orci, vel porta ligula. Duis sollicitudin in elit eu laoreet.</p>
<p>Sed volutpat vel tortor id placerat. In nisl odio, ornare at enim sit amet, mollis ultricies libero. Mauris et auctor lorem, in maximus felis. Fusce elementum nisi odio, sed venenatis enim convallis euismod. Sed sed pharetra ligula. Donec venenatis imperdiet turpis, vitae vehicula leo luctus a. Cras ultrices rutrum aliquet. Proin scelerisque nisl vitae posuere consectetur. Sed viverra rutrum nulla ut accumsan. Curabitur posuere consectetur nulla nec cursus. Donec id massa odio.</p></div>
</div>
JSFiddle Version: https://jsfiddle.net/9gtLughL/
<div style="overflow:Auto;">
<h2>my code</h2>
</div>
use this code at the start of the div
You can do this using a table structure.
HTML:
<div class="container table">
<div class="table-row">
Top Content
</div>
<div class="table-row height-100">
<div class="table-cell">
<div class="height-100">
<div class="scroll">
Bottom scrollable content with 100% remaining height
</div>
</div>
</div>
</div>
</div>
CSS:
.table { display:table; }
.table-row { display:table-row; width:100%; }
.table-cell {display:table-cell; height:0; overflow:hidden; }
.container { height:100vh; }
.height-100 { height:100%; }
.scroll { overflow:auto; height:100%; }
The 100vh attributes makes the body tag to have 100% of view height(screen height).
In a table structure, the div with class table-row will get height as much as needed by children, but if it also has height-100 will get 100% of what the other rows do not occupy. Inside it I did a few ugly twitches to get the overflow running on a dynamic height table-cell,
Demo: http://jsfiddle.net/alexix/70vf92e3/2/
http://jsfiddle.net/YZdv4/50/ heres the jsfiddles
UPDATE: I figured you could do this with absolute positioning and javascript; however, are there any solutions with just using css/floats?
Sorry if this is difficult to understand, but i'm trying to make the purple bg #content turn to background:papayawhip by making the #right col 100% height of the parent #content
<div id="container" class="cf">
<div id="header">
<p>im header</p>
</div>
<div id="content" class="cf">
<div id="left"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce viverra enim sit amet ante lacinia iaculis. Nullam ac nulla vel purus posuere luctus. Mauris a elit nisl. Mauris commodo convallis sem in feugiat. Suspendisse mauris leo, molestie sit amet commodo eget, mollis a nibh. Suspendisse auctor commodo interdum. Aliquam posuere, erat eget pharetra hendrerit, mi tellus tristique tellus, vel accumsan elit nisi ac diam. Morbi consequat ligula est, et volutpat ante. Curabitur pulvinar nulla non neque iaculis pulvinar sed eu sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce sodales metus et nisl dictum non ullamcorper magna blandit. Aliquam erat volutpat. Aenean id massa sed massa sollicitudin euismod sed non lorem. Sed accumsan, nisl vitae adipiscing cursus, magna enim accumsan augue, a rutrum mauris lorem non mauris. Sed consequat venenatis venenatis.
</P></div>
<div id="right">
<img src="http://vvcap.net/db/0ggWsnKKw1FI1w0xojUT.png" />
<img src="http://vvcap.net/db/Rik9UwaQOUuhKpML16td.png" />
</div>
</div>
<p>im the container</p>
</div>
div#container{background:yellow;min-height:500px;}
div#header{background:pink; height:100px;}
div#content{position:relative;background:purple; height:100%;}/*heres parent container*/
div#content #left{float:left; height:100%; background:#222; color:#fff;width:50%;}
div#content #right{float:left; height:100%; background:papayawhip;width:50%;}
div#content #right img{}
/* For modern browsers */
.cf:before,
.cf:after {
content:"";
display:table;
}
.cf:after {
clear:both;
}
/* For IE 6/7 (trigger hasLayout) */
.cf {
*zoom:1;
}
I am not sure I know exactly what you were after, but my intepretation of the question lead to this result: fiddle, http://jsfiddle.net/grE5A/62/
I only pasted the changed CSS elements in here.
HTML
<div id="container" class="cf">
<div id="header">
<p>im header</p>
</div>
<div id="content" class="cf">
<div id="right">
<img src="http://vvcap.net/db/0ggWsnKKw1FI1w0xojUT.png" />
<img src="http://vvcap.net/db/Rik9UwaQOUuhKpML16td.png" />
</div>
<div id="left"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce viverra enim sit amet ante lacinia iaculis. Nullam ac nulla vel purus posuere luctus. Mauris a elit nisl. Mauris commodo convallis sem in feugiat. Suspendisse mauris leo, molestie sit amet commodo eget, mollis a nibh. Suspendisse auctor commodo interdum. Aliquam posuere, erat eget pharetra hendrerit, mi tellus tristique tellus, vel accumsan elit nisi ac diam. Morbi consequat ligula est, et volutpat ante. Curabitur pulvinar nulla non neque iaculis pulvinar sed eu sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce sodales metus et nisl dictum non ullamcorper magna blandit. Aliquam erat volutpat. Aenean id massa sed massa sollicitudin euismod sed non lorem. Sed accumsan, nisl vitae adipiscing cursus, magna enim accumsan augue, a rutrum mauris lorem non mauris. Sed consequat venenatis venenatis.
</P></div>
</div>
<p>im the container</p>
</div>
CSS
/*heres parent container*/
div#content #left {
float: none;
height: 100%;
background: #222;
color: white;
width: 50%;
position: absolute;
left: 0;
top: 0;
z-index: 10;
}
div#content #right {
float: none;
height: 100%;
background:
papayaWhip;
width: 50%;
position: relative;
padding-left: 50%;
z-index: 0;
}
The background ends because it is the end of the content (One of the quirks of floats). The only way that I found for the papayawhip background to fill out the whole purple background is to add padding to the bottom of it. Such as padding-bottom: 25%; or whatever % works works.
There is a problem:
The child, DIV#left won't be able to calculate it's own height using the parent DIV's min-height
div#container{background:yellow;min-height:500px;}
This is why it won't stretch to the bottom of DIV#content.
Edit:
I don't always suggest tables for layouts, but when I do it's for problems like this.
http://jsfiddle.net/YZdv4/56/