I am fairly new to web design and i'm trying to test out page layouts. I have a layout with a header, left floating div, right floating div, body, and footer. What i'm trying to do is to get the "body" div to fill the vertical space between the floating divs. And also, if possible, how could I get the entire layout to fill the vertical space of the screen? I included an image at the bottom of the page, i'm trying to fill in all the scribbled space.
Here is my html code,
div.container {
width: 100%;
border: solid 1px;
}
header,
footer {
background-color: rgb(000, 000, 000);
color: rgb(255, 255, 255);
padding: 10px;
text-align: center;
clear: left;
}
#nav {
background-color: rgba(50, 50, 50, 0.8);
float: left;
width: 150px;
padding: 10px;
}
#body {
background-color: rgba(100, 100, 100, 0.8);
overflow: hidden;
padding: 10px;
text-align: center;
}
#right {
background-color: rgba(50, 50, 50, 0.8);
float: right;
max-width: 150px;
padding: 10px;
}
<body>
<div class="container">
<header>
<h1>Title</h1>
</header>
<div id="nav">
<p>Lorem ipsum dolor sit amet, integer velit senectus sit, proin ut id nec eu vel aliquet, pellentesque et venenatis lacinia aliquet wisi, bibendum mauris, fames turpis. Lectus nibh gravida wisi pede vel. Eu feugiat ligula aliquam mi, dolor quis, sollicitudin
ut, quis mauris magna lectus. Velit a dignissim et, phasellus convallis sed condimentum, cum vitae consequat laoreet vestibulum. Rhoncus felis porttitor vitae, est mi ac etiam et ligula est. Rhoncus egestas erat fringilla, praesent et augue ultricies
aliquam. Nascetur imperdiet nisl porttitor aenean, ante ipsum ornare magni, arcu consectetur, a pulvinar.</p>
</div>
<div id="right">
<p>Lorem ipsum dolor sit amet, integer velit senectus sit, proin ut id nec eu vel aliquet, pellentesque et venenatis lacinia aliquet wisi, bibendum mauris, fames turpis. Lectus nibh gravida wisi pede vel. Eu feugiat ligula aliquam mi, dolor quis, sollicitudin
ut, quis mauris magna lectus. Velit a dignissim et, phasellus convallis sed condimentum, cum vitae consequat laoreet vestibulum. Rhoncus felis porttitor vitae, est mi ac etiam et ligula est. Rhoncus egestas erat fringilla, praesent et augue ultricies
aliquam. Nascetur imperdiet nisl porttitor aenean, ante ipsum ornare magni, arcu consectetur, a pulvinar.</p>
</div>
<div id="body">
<p>Lorem ipsum dolor sit amet, integer velit senectus sit, proin ut id nec eu vel aliquet, pellentesque et venenatis lacinia aliquet wisi, bibendum mauris, fames turpis. Lectus nibh gravida wisi pede vel. Eu feugiat ligula aliquam mi, dolor quis, sollicitudin
ut, quis mauris magna lectus. Velit a dignissim et, phasellus convallis sed condimentum, cum vitae consequat laoreet vestibulum. Rhoncus felis porttitor vitae, est mi ac etiam et ligula est. Rhoncus egestas erat fringilla, praesent et augue ultricies
aliquam. Nascetur imperdiet nisl porttitor aenean, ante ipsum ornare magni, arcu consectetur, a pulvinar.</p>
</div>
<footer>Bottom</footer>
</div>
</body>
</html>
What i'm trying to figure out.
Try this CSS:
div.container {
width:100%;
border:solid 1px;
}
header, footer {
background-color:rgb(000,000,000);
color:rgb(255,255,255);
padding:10px;
text-align:center;
clear:left;
}
#nav {
background-color:rgba(50,50,50,0.8);
float:left;
width:150px;
padding:10px;
}
#body {
background-color:rgba(100,100,100,0.8);
overflow:hidden;
padding:10px;
text-align:center;
}
#right {
background-color:rgba(50,50,50,0.8);
float:right;
max-width:150px;
padding:10px;
}
https://jsfiddle.net/xwsxupv0/1/
Related
Beginner with HTML here. I've been getting a pretty funky error with my HTML script. When I display it, the footer looks it was formatted like an inline element. It is showing up on the side of my timeline rather than at the bottom of the page.
Here is a screen shot:
Webpage Screenshot
Here is the code:
<DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>About Mangetsu Budogu</title>
<style>
/*Total Body width must be greater than widths for content */
/*global scope css */
body{
width: 1080px;
font-family: Arial, Verdana, sans-serif;
color: #665544;
}
.main_content{
float: left;
width: 620px;
margin: 10px;
}
/* Nav Bar CSS */
nav {
overflow: hidden;
background-color: #333;
font-family: Arial, Helvetica, sans-serif;
border-radius: 25px;
width: 99%;
text-align: center;
}
nav a{
float: center;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
nav a:hover{
background-color: red;
}
nav li{
display: inline;
padding: 5px;
}
/* Timeline */
.timeline{
float: left;
width: 300px;
margin: 10px;
}
li{
margin: 10px 0;
}
/* Main Content*/
#main_heading{
text-align: center;
padding-top: 25px;
padding-bottom: 25px;
}
footer {
display: block;
}
</style>
</head>
<header>
<center><img class="logo" src="https://upload.wikimedia.org/wikipedia/commons/7/76/Sakai_Kamon.svg" width="200" height="200"/></center>
<nav>
<ul id="nav_li">
<li>Home</li>
<li>About</li>
<li>Products</li>
<li>Classes</li>
<li>Contact</li>
</ul>
</nav>
</header>
<body>
<h1 id="main_heading">About Mangetsu Budogu</h1>
<article class="main_content">
<h2>Beginnings</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.Praesent posuere felis non turpis venenatis porta. Ut vel ultrices ipsum, vel blandit ipsum. Fusce rhoncus eget mauris ut pellentesque. Aenean condimentum lacus aliquam tristique efficitur. Nam commodo mattis dolor id molestie. Nulla molestie, magna suscipit gravida placerat, tortor libero faucibus risus, ac lacinia lacus metus at ex. Integer auctor sollicitudin quam, in gravida diam rhoncus non. Praesent lacinia velit est, et efficitur velit lobortis quis. Donec eleifend gravida sem aliquet finibus. Duis tempus, orci vel blandit luctus, sem sapien rhoncus enim, eu consequat ex mauris posuere augue. Etiam mi sem, scelerisque sit amet dictum eget, eleifend id urna. Fusce non condimentum dui, vel rhoncus nisl. Sed lacinia dui non lacinia mollis. Maecenas sodales lorem et est sodales molestie.
</p>
<p>
Nam et ipsum ac est ornare mattis. Mauris aliquet consequat lorem id lacinia. Nunc vulputate mollis bibendum. Duis sed enim a turpis mollis consectetur vitae vel mi. Phasellus quis lectus velit. Morbi vel libero pulvinar tortor placerat placerat. Suspendisse id ante leo. Etiam eu facilisis enim. Cras lorem tellus, bibendum eget turpis vitae, porta blandit lorem. Nam ut dui eu mauris malesuada ultricies. Cras nec erat dictum, ultricies sem non, vestibulum arcu. Fusce varius imperdiet nulla eu convallis. Curabitur quis mattis felis, non pretium ex. </p>
<h2>The 1990s Era</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent posuere felis non turpis venenatis porta. Ut vel ultrices ipsum, vel blandit ipsum. Fusce rhoncus eget mauris ut pellentesque. Aenean condimentum lacus aliquam tristique efficitur. Nam commodo mattis dolor id molestie. Nulla molestie, magna suscipit gravida placerat, tortor libero faucibus risus, ac lacinia lacus metus at ex. Integer auctor sollicitudin quam, in gravida diam rhoncus non. Praesent lacinia velit est, et efficitur velit lobortis quis. Donec eleifend gravida sem aliquet finibus. Duis tempus, orci vel blandit luctus, sem sapien rhoncus enim, eu consequat ex mauris posuere augue. Etiam mi sem, scelerisque sit amet dictum eget, eleifend id urna. Fusce non condimentum dui, vel rhoncus nisl. Sed lacinia dui non lacinia mollis. Maecenas sodales lorem et est sodales molestie.
</p>
</article>
<div class="timeline">
<h3>Mangetsu Budogu Timeline</h3>
<ul>
<li><time>1991</time>: Established Flagship Store in <strong>Kyoto, Japan, Nishijin District</strong></li>
<li>1995: Created first Kendogu Website in Japan</li>
<li>1997: Establishment of 2nd Store in <strong>Shinagawa District, Tokyo</strong></li>
<li>1999: Creation of the Mangetsu Budogu Reward Points</li>
<li>2001: Establishment of 3rd Store in <strong>Nakamura District, Nagoya</strong></li>
<li>2010: Creation of the Shingsengumi Line of Bogu</li>
<li>2011: First Overseas Store in Los Angeles, California</li>
</ul>
</div>
<footer>
© Mangetsu Budogu 2018
</footer>
</body>
</html>
You need to clear the float property you have assigned to <article class="main_content"> and <div class="timeline">. Just add this element before footer.
<div style="clear:both;"></div>
Your .main_content and the timeline are floating elements which don't span the whole width of the body, that's why the footer is displayed next to it (it "floats" next to the floating elements).
To avoid this, add clear: both to the footer CSS
This question already has answers here:
Make wrapper take maximum width of child image? [duplicate]
(2 answers)
Closed 4 years ago.
I have a DIV-wrapper (centered) that contain a picture and a paragraph:
What I want to do is to make the width of the wrapper flexible, so that it can fit the width of the picture. I have achieved this with display:table; (I also tried inline-block, and also width:fit-content; [the last of which oddly enough didn't work]).
The text also fits perfectly in there, but...! As soon as the text becomes longer than the width of the picture, the wrapper expands to fit the text rather than fitting the picture (and breaking the text).
Is there any solution to this problem?
.image_wrapper {
display:table;
margin:25px auto 25px auto; /* centering wrapper on page */
text-align:center;
border: 1px solid red;
}
.image_wrapper img {
height: auto;
max-width:99%;
border: 3px solid #31558e;
}
.image_wrapper p {
color:#84bddb;
font-size: 13.3px;
line-height: 15px;
text-align: left;
margin-left:0px;
}
<div class="image_wrapper">
<img src="pic.jpg">
<br>
<p>Some text</p>
</div>
.wrapper {
border: 1px solid red;
display: table;
width: 1%;
margin: 0 auto;
}
.caption {
text-align: center;
}
<div class="wrapper">
<img src="http://via.placeholder.com/200/300">
<p class="caption">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ornare dictum ligula quis dictum. Nam dictum, eros sit amet imperdiet aliquet, ligula nisl blandit lectus, quis malesuada nunc ipsum ac magna. Vestibulum in magna eu sem suscipit molestie.
Maecenas a ligula molestie, volutpat turpis et, venenatis massa. Nam aliquam auctor lectus ac lacinia. Nam consequat lacus porta odio hendrerit mollis. Etiam at congue est, eu fermentum erat. Praesent vestibulum malesuada ante. Cum sociis natoque
penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
You can take the approach without jQuery using the figure/figcaption combination BUT, this only works if you have one figure/figcaption element on the page.
Set the height of the figure to be 100% and set the width of the fig caption to be the width of your image. This will contain all your text in the figure element and allow the height to expand to the length of your text.
figure {
display: table;
margin: 25px auto 25px auto;
/* centering wrapper on page */
text-align: center;
border: 1px solid red;
height: 100%;
}
figcaption {
color: #84bddb;
font-size: 13.3px;
line-height: 15px;
text-align: left;
margin-left: 0px;
width: 100px;
}
<figure>
<img src="http://via.placeholder.com/100x150" width="100">
<br>
<figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut nulla consequat, ullamcorper erat vitae, dictum leo. Phasellus semper, ante eget semper eleifend, tortor tortor facilisis quam, vitae convallis neque nunc non justo. Maecenas rhoncus
ligula id velit consectetur, sed malesuada tellus pharetra. Nulla ac dolor at ex sodales tincidunt vitae gravida turpis. Etiam erat nunc, aliquet a ullamcorper eget, commodo et orci. In id urna sagittis ante viverra venenatis. Ut laoreet ligula vel
orci placerat, at fringilla odio euismod. Etiam euismod eget ligula at dapibus. Sed vel bibendum nibh.</figcaption>
</figure>
I would suggest using some jQuery to take care of calculating the width as well as the case of multiple div's with images of different sizes.
$(document).ready(function() {
$(".image_wrapper img").each(function(index, value) {
var width = $(this).width();
$(this).parent().children(".image_wrapper > p").css("width", width);
})
});
.image_wrapper {
display:table;
margin:25px auto 25px auto; /* centering wrapper on page */
text-align:center;
border: 1px solid red;
}
.image_wrapper img {
height: auto;
max-width:99%;
border: 3px solid #31558e;
}
.image_wrapper p {
color:#84bddb;
font-size: 13.3px;
line-height: 15px;
text-align: left;
margin-left:0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="image_wrapper">
<img src="http://via.placeholder.com/100x150">
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut nulla consequat, ullamcorper erat vitae, dictum leo. Phasellus semper, ante eget semper eleifend, tortor tortor facilisis quam, vitae convallis neque nunc non justo. Maecenas rhoncus
ligula id velit consectetur, sed malesuada tellus pharetra. Nulla ac dolor at ex sodales tincidunt vitae gravida turpis. Etiam erat nunc, aliquet a ullamcorper eget, commodo et orci. In id urna sagittis ante viverra venenatis. Ut laoreet ligula vel
orci placerat, at fringilla odio euismod. Etiam euismod eget ligula at dapibus. Sed vel bibendum nibh.</p>
</div>
<div class="image_wrapper">
<img src="http://via.placeholder.com/150x150">
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut nulla consequat, ullamcorper erat vitae, dictum leo. Phasellus semper, ante eget semper eleifend, tortor tortor facilisis quam, vitae convallis neque nunc non justo. Maecenas rhoncus
ligula id velit consectetur, sed malesuada tellus pharetra. Nulla ac dolor at ex sodales tincidunt vitae gravida turpis. Etiam erat nunc, aliquet a ullamcorper eget, commodo et orci. In id urna sagittis ante viverra venenatis. Ut laoreet ligula vel
orci placerat, at fringilla odio euismod. Etiam euismod eget ligula at dapibus. Sed vel bibendum nibh.</p>
</div>
Also, you don't need to write custom div's with classes if you use the figure/figcaption combintation.
$(document).ready(function() {
$(".myFigure img").each(function(index, value) {
var width = $(this).width();
$(this).parent().children(".myFigure > .myCaption").css("width", width);
})
});
figure {
display: table;
margin: 25px auto 25px auto;
/* centering wrapper on page */
text-align: center;
border: 1px solid red;
height: 100%;
}
figcaption {
color: #84bddb;
font-size: 13.3px;
line-height: 15px;
text-align: left;
margin-left: 0px;
/*width: 100px;*/
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<figure class="myFigure">
<img src="http://via.placeholder.com/100x150" width="100">
<br>
<figcaption class="myCaption">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut nulla consequat, ullamcorper erat vitae, dictum leo. Phasellus semper, ante eget semper eleifend, tortor tortor facilisis quam, vitae convallis neque nunc non justo. Maecenas rhoncus
ligula id velit consectetur, sed malesuada tellus pharetra. Nulla ac dolor at ex sodales tincidunt vitae gravida turpis. Etiam erat nunc, aliquet a ullamcorper eget, commodo et orci. In id urna sagittis ante viverra venenatis. Ut laoreet ligula vel
orci placerat, at fringilla odio euismod. Etiam euismod eget ligula at dapibus. Sed vel bibendum nibh.</figcaption>
</figure>
<figure class="myFigure">
<img src="http://via.placeholder.com/150x150">
<br>
<figcaption class="myCaption">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut nulla consequat, ullamcorper erat vitae, dictum leo. Phasellus semper, ante eget semper eleifend, tortor tortor facilisis quam, vitae convallis neque nunc non justo. Maecenas rhoncus
ligula id velit consectetur, sed malesuada tellus pharetra. Nulla ac dolor at ex sodales tincidunt vitae gravida turpis. Etiam erat nunc, aliquet a ullamcorper eget, commodo et orci. In id urna sagittis ante viverra venenatis. Ut laoreet ligula vel
orci placerat, at fringilla odio euismod. Etiam euismod eget ligula at dapibus. Sed vel bibendum nibh.</figcaption>
</figure>
I used column-count, but it looks like I found a bug when an element has an absolute position and overflowed from the parent.
#master {
column-count: 2;
}
.Books {
display: table;
column-break-inside: avoid;
-webkit-column-break-inside: avoid;
}
JSFiddle
There are two issues. One, the two red elements are not balanced (see the purple line) and second, the red element dropped on the bottom.
Just add margin-top: -1px; in the .bookmarkAds class.
And margin-top: 10px; in .books class .
#master {
column-count: 2;
}
#rule {
position: absolute;
width: 100%;
height: 1px;
background: #9C27B0;
top: 7px;
left: 0;
}
.Books {
width: 100%;
font-family: tahoma;
font-size: 12px;
border: 1px solid #ddd;
line-height: 150%;
background: #FFFFF6;
float: right;
box-sizing: border-box;
padding: 5px 5px 10px 5px;
margin: 3px;
margin-top: 10px;
position: relative;
display: table;
column-break-inside: avoid;
-webkit-column-break-inside: avoid;
min-height: 200px;
}
.bookmarkAds {
margin-top: -1px;
position: absolute;
left: 4px;
color: #9e9e9e;
cursor: pointer;
text-shadow: 1px 2px 2px rgba(0, 0, 0, 0.30);
top: -10px;
font-size: 22px;
background: red;
}
<div id="rule"></div>
<div id="master">
<div class="Books">
<div id="Bookmark" class="bookmarkAds RedHeart" title="" data-id="653373">x</div>
Lorem ipsum dolor sit amet, duis mattis pharetra vehicula nec phasellus sed, vestibulum mauris porttitor ipsum nostra tellus, bibendum aliquam nibh, libero elementum ut suspendisse ante dolor sit, erat quis tellus iaculis mauris sed. Nam fusce hac in metus facilisis, dictum urna nulla nulla, metus porttitor donec irure facilisis, curabitur sed id sapien gravida, eu a dolor autem et. Varius sollicitudin odio ut, eget maecenas, lacinia lobortis adipiscing id praesent orci varius, bibendum euismod tenetur pellentesque, in justo et massa nisl. Odio quis eget mauris dui consectetuer, lorem mi quis mollis arcu, ullamcorper lobortis sem, cras urna lacus sed eu. Nec taciti aliquet, praesent risus rutrum ac, sagittis eu. Sit id a, vel ultrices parturient etiam magna at. Phasellus hendrerit lacinia ac eros.
</div>
<div class="Books">
<div id="Bookmark" class="bookmarkAds RedHeart" title="" data-id="653373">x</div>
Lorem ipsum dolor sit amet, duis mattis pharetra vehicula nec phasellus sed, vestibulum mauris porttitor ipsum nostra tellus, bibendum aliquam nibh, libero elementum ut suspendisse ante dolor sit, erat quis tellus iaculis mauris sed. Nam fusce hac in metus facilisis, dictum urna nulla nulla, metus porttitor donec irure facilisis, curabitur sed id sapien gravida, eu a dolor autem et. Varius sollicitudin odio ut, eget maecenas, lacinia lobortis adipiscing id praesent orci varius, bibendum euismod tenetur pellentesque, in justo et massa nisl. Odio quis eget mauris dui consectetuer, lorem mi quis mollis arcu, ullamcorper lobortis sem, cras urna lacus sed eu. Nec taciti aliquet, praesent risus rutrum ac, sagittis eu. Sit id a, vel ultrices parturient etiam magna at. Phasellus hendrerit lacinia ac eros.
Lorem ipsum dolor sit amet, duis mattis pharetra vehicula nec phasellus sed, vestibulum mauris porttitor ipsum nostra tellus, bibendum aliquam nibh, libero elementum ut suspendisse ante dolor sit, erat quis tellus iaculis mauris sed. Nam fusce hac in metus facilisis, dictum urna nulla nulla, metus porttitor donec irure facilisis, curabitur sed id sapien gravida, eu a dolor autem et. Varius sollicitudin odio ut, eget maecenas, lacinia lobortis adipiscing id praesent orci varius, bibendum euismod tenetur pellentesque, in justo et massa nisl. Odio quis eget mauris dui consectetuer, lorem mi quis mollis arcu, ullamcorper lobortis sem, cras urna lacus sed eu. Nec taciti aliquet, praesent risus rutrum ac, sagittis eu. Sit id a, vel ultrices parturient etiam magna at. Phasellus hendrerit lacinia ac eros.
</div>
</div>
This is the way column-count works. Add margin-top: 10px; to your .Books class and the issue will be fixed. Like this: https://jsfiddle.net/x6ms3nxr/5/
Red element dropped to the bottom is actually a part of bookmark from second column that is cut and gone to the first column.
Some additional details regarding columns support in browsers can be found here:
http://zomigi.com/blog/deal-breaker-problems-with-css3-multi-columns/
I am trying to move my footer to the bottom and in the cases if the content is not long enough, then push it to the bottom of the screen. I read that it can be achieved solely by using css, however I couldn't achieve it.
I tried creating columns,
<body>
<div id="wrapper">
<nav class="navbar navbar-default" role="navigation">
...
</nav>
<div id="content">
...
</div>
<div id="footer">
...
</div>
</div>
</body>
Then, in my css, I tried using:
#footer {
height: 30px;
width:100%;
background-color: #2D2D2D;
position: absolute;
left: 0;
bottom: 0;
}
#wrapper {
background-color: purple;
position: absolute;
top: 0px;
bottom: 0px;
width: 100%;
}
but no luck :/
Here I created it in bootply. Here, I added bunch of <br> tags to lengthen the content and added some text underneath. What I want is instead if content is short, stick the footer to the bottom of the page (not where content ends in the middle of the screen); and if content is long, where the content ends just below content.
What am I doing wrong/missing out?
Well, if you want it to always stay at the bottom, you can use this code. Remove the <p> tags and run again to test without text
html,body {
height: 100%;
margin: 0;
padding: 0;
}
#wrapper {
min-height: 100%;
position: relative;
padding-bottom: 5em;
box-sizing: border-box;
}
#content {
background: red;
}
footer {
height: 4em;
background: blue;
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
<body>
<div id="wrapper">
<div id="content">
<p> Lorem ipsum dolor sit amet, adipiscing odio, vitae nulla luctus consectetuer, cras odio turpis adipiscing lobortis, tempor luctus morbi. Sed vitae id in, vel tempor mattis rutrum, eu non mauris in erat lectus enim, eget morbi quo imperdiet, mi lorem aliquam sed accumsan orci. Rhoncus nonummy turpis ipsum tempus tempor elementum, vestibulum sint tempor, accumsan mauris scelerisque rutrum. Eget rhoncus hendrerit, ipsum ipsum nunc sit ut arcu aenean, urna in justo reprehenderit mollis, suscipit erat, consequat suspendisse turpis duis nec pellentesque tristique. Lectus velit, vestibulum lorem enim turpis a eu mauris, mauris bibendum sociis lobortis sodales sed, eget rhoncus quisque consequat curabitur sit. Sodales velit et convallis interdum quis rutrum, dolor lobortis neque mi eget lorem, sed tincidunt dis convallis. Feugiat in conubia nec ipsum, nec rutrum nisl, vitae id vestibulum sollicitudin fringilla ac ligula, eget rutrum in. Tortor mollis amet, nulla pharetra nec in, vel vulputate nec eu diam, cras massa adipiscing pulvinar, id pulvinar massa dignissim. Quisque lorem enim vel orci vestibulum, consectetuer tincidunt et egestas.</p>
<p>
Donec nunc nec in, ut non lorem eget tortor facilisi sed, eget tempor a duis urna, pellentesque proin blandit et, mollis dictum dictum. Aliquet massa praesent vitae lorem at posuere, id lobortis nec id dignissim lorem nisi, at amet occaecati, duis enim quisque quam est, ultrices nunc semper vivamus praesent aenean nam. Natoque neque adipiscing, ipsum magna libero. Pellentesque mattis, fusce maecenas sit vel, accumsan eleifend et justo cras dui, wisi quisque interdum amet arcu bibendum, ante eget non mattis non. Iaculis congue cras feugiat. Platea aliquet suspendisse, orci nulla aliquam adipiscing in. Nullam libero velit in pellentesque diam est, urna phasellus, pellentesque porta eu. Ante lacus duis amet libero odio, accumsan neque tincidunt imperdiet, wisi praesent diam arcu et, erat aliquam feugiat ultricies tortor ullamcorper. Vestibulum sapien velit, ante fusce cursus volutpat tellus, eros officiis, ridiculus cum eu suscipit, felis dui sed nulla hac neque fermentum. Vivamus sagittis, malesuada nullam, dolor sit sed sollicitudin et maecenas fermentum, non nunc dapibus purus. Aliquam rhoncus aliquam sit fermentum, curabitur nulla accumsan.</p>
<p>
Nec consequat. Purus neque inceptos suscipit dictum, dolor massa ut egestas proin sed ultrices, eleifend at sed sit mi adipiscing sociis. Nostra laoreet metus nulla in. Urna eget, accumsan id mattis morbi, etiam a consequat curabitur, in felis vel. Aliquam feugiat sed, sit ligula sit praesent lobortis orci metus, nulla cursus mi velit vitae, a erat elit, velit ultrices consectetur libero perferendis libero. Risus sed, suspendisse urna in eget voluptas tristique, aliquam justo lectus, rutrum scelerisque, sem nibh qui dictum aliquet lacinia ut. Urna sagittis ac tristique gravida risus aliquam, dictum ipsum ac sodales, felis mauris repellendus porttitor aenean, orci vel feugiat nunc hendrerit. Porta eu, etiam pellentesque mauris et aliquam consectetuer donec, molestie dui magna enim, ac eu erat ut, lectus ligula feugiat urna per. Ornare aliquet ligula, ultricies sint arcu ipsum nulla. Vel ut vitae dui adipiscing.</p>
</div>
<footer>This is a footer</footer>
</div>
</body>
The trick is to use position: relative on the footer's container element and position: absolute on the footer to actually push it to the end of the container. Position: fixed isn't necessary.
https://codepen.io/cbracco/pen/zekgx
html {
height: 100%;
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
position: relative;
margin: 0;
padding-bottom: 6rem;
min-height: 100%;
font-family: "Helvetica Neue", Arial, sans-serif;
}
.footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
background-color: #efefef;
text-align: center;
}
This example does the same thing with a container element over the entire page, instead of operating on the html and body tags.
http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
This sends the footer to bottom of the bage no matter how much text you have:
.footer { background-color: #2D2D2D;
position:absolute;
bottom:0px;
width: 100%;
margin: 0;
background-color: #000;
height: 30px;/* or however high you would like */ }
html, body {
height: 100%; }
.wrapper { background-color: purple;
position: absolute;
width: 100%;
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -30px; }
.footer, .push {
30px; }
.navbar {
background-color: red }
Ok, sorry for the misunderstanding, now it's fixed: http://www.bootply.com/N3XiwwGr9q#
I am trying to make the header and footer fixed at the top and bottom portion of a resizable container. However, when I resize the container the footer stays fixed and doesn't respond with its container.
Here is my code:
<script>
$(function() {
$( "#resizable" ).resizable();
});
</script>
<style type="text/css">
.container {
height: 500px;
width: 500px;
border: 1px solid black;
}
#sticky-header, #sticky-footer {
position: relative;
min-height: 100px!important;
width: 100%;
background-color: black;
}
#sticky-header {
top: 0;
}
#main {
min-height: 300px!important;
width: 100%;
overflow: scroll;
}
#sticky-footer {
bottom: 0;
}
</style>
</head>
<body>
<div class="container" id="resizable">
<div id="sticky-header"></div>
<div id="main"></div>
<div id="sticky-footer"></div>
</div><!-- /end container -->
</body>
not sure what you expect, but CSS on its own should do this via flex and resize : demo or snippets below
.container {
margin: auto;
height: 200px;
width: 500px;
border: 1px solid black;
display: flex;
flex-direction: column;
resize: both;
overflow: auto;
/* to trigger resize handle */
}
#sticky-header,
#sticky-footer {
text-align: center;
color: white;
background-color: black;
}
#main {
flex: 1;
overflow: auto;
}
<div class="container" id="resizable">
<div id="sticky-header">height from content</div>
<div id="main">scroll when needed</div>
<div id="sticky-footer">height from content</div>
</div>
the same with more content
.container {
margin: auto;
height: 200px;
width: 500px;
border: 1px solid black;
display: flex;
flex-direction: column;
resize: both;
overflow: auto;
}
#sticky-header,
#sticky-footer , nav a{
color: white;
background-color: black;
text-align:center;
}
#main {
flex: 1;
overflow: auto;
}
<div class="container" id="resizable">
<div id="sticky-header">
<h1>HTML Ipsum Presents</h1>
</div>
<div id="main">
<p>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. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus
lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor,
facilisis luctus, metus</p>
<p>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. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus
lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor,
facilisis luctus, metus</p>
<p>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. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus
lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor,
facilisis luctus, metus</p>
</div>
<div id="sticky-footer">
<nav>
Home
About
Clients
Contact Us
</nav>
</div>
</div>