I have written this sticky footer template and I want my content div to have a 100% min-height. Problem is, when I do that, it extends under the footer, with an extra height of header height + footer height. How can I fix this? It should support also short content and long content, in the same manner of the sticky footer. Do I need to use jQuery? I'm a beginner so please KISS.
HTML
<body>
<form id="form1" runat="server">
<div class="wrapper">
<div class="header"></div>
<div class="content">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
<div class="footer"></div>
</div>
</form>
</body>
CSS
html, body {
min-height:100%;
height:100%;
}
#form1 {
min-height:100%;
height:100%;
margin:0;
}
.wrapper {
min-height:100%;
height:100%;
position:relative;
}
.header {
background:#990066;
height:100px;
}
.content {
background:#ffffcc;
padding-bottom:100px; /* Height of the footer */
min-height: 100%;
width: 1120px;
margin: 0 auto;
}
.footer {
position:absolute;
bottom:0;
width:100%;
height:100px; /* Height of the footer */
background:#333;
}
.content {
min-height: calc(100% - 100px - 100px); /* minus header-height minus footer-height */
}
Minimum height of the content element is set to 100% minus 100px (height of the header) and 100px (height of the footer). Using CSS function calc(), the browser calculates the exact height. This would be better in terms of cross browser compatibility:
.content {
min-height: -webkit-calc(100% - 100px - 100px);
min-height: -moz-calc(100% - 100px - 100px);
min-height: calc(100% - 100px - 100px);
}
This can be achieved with just css.
HTML (note the slight change in nesting for the footer div)
<body>
<form id="form1" runat="server">
<div class="wrapper">
<div class="header"></div>
<div class="content">
...
</div>
</div>
<div class="footer"></div>
</form>
</body>
CSS
html, body, #form1 {height: 100%;}
.wrapper {
min-height: 100%;
}
.content {
padding-bottom: 150px; /* must be same height as the footer */
}
.footer {
margin-top: -150px; /* negative value of footer height */
height: 150px;
}
Adapted from here.
http://www.cssstickyfooter.com/using-sticky-footer-code.html
Also a quick fiddle http://jsfiddle.net/Zf8Fh/3/
You just need to fixed postion of .footer class in css like below
.footer {
position:fixed;
bottom:0;
width:100%;
height:100px; /* Height of the footer */
background:#333;
}
Related
I would the image on desktop to stay the same, but on mobile to be bigger on height. What should i change in the code ? I'm using Bootstrap 5 aswell.
<div class="container">
<div class="row">
<div class="col-12">
<img src="/images/section1/home-image.jpg" class="img-fluid" id="img1" alt="man on boat">
<img src="/images/section1/home-logo.png" class="img-fluid" id="img2" alt="logo Seafarer">
</div>
</div>
</div>
#section1 {
position:relative;
}
#img2 {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
Here you go...
I think this is impossible to achieve with Bootstrap. I would use #media query if I were you.
Add this to your CSS:
#media only screen and (max-width: 575px) {
.col-12 {
height: 500px; // Adjust the height
}
#img1 {
object-fit: cover;
height: 100%;
}
}
It's important to add object-fit: cover; otherwise your image will be screwed. Try to remove this line to see what I'm talking about.
Let me know if this is helpful.
I'm relatively new to web designing so hopefully what I'm writing here makes sense . . .
I have three sections on my page. A header, the middle section and the footer. Within the middle section there are three divs which include an image and text and each taking up 30% of the width of the entire middle section. When the page is decreased to smaller sizes, the footer bumps up onto this middle section. Of course, I'm wanting the footer section to remain at the bottom and be responsive.
At first I had these three divs floated left and I thought this may have something to do with the footer moving. But then I changed the divs to an inline-block.
I've also tried to clear: both. The footer keeps moving up when I scale down the page.
Hopefully, I'm making sense and someone can help. Thanks.
HTML:
<section class='mid-section'>
<div class='one-third'>
<a href='thai-tattoo.html'><img src='https://farm2.staticflickr.com/1528/26102511281_67fdc7c189_m.jpg' alt='Bangkok street'></a>
<h3>HEADLINE</h3>
<p>TEXT</p>
</div>
<div class='one-third'>
<a><img src='http://gratisography.com/pictures/264_1.jpg'><h3>HEADLINE</h3><p>TEXT</p>
</div>
<div class='one-third'>
<a><img src='http://gratisography.com/pictures/264_1.jpg'><h3>HEADLINE</h3><p>TEXT</p>
</div>
</section>
<div class='bottom-section'>
<div class='social-icons'>
<p > Follow us on the Web </p>
</div>
</div>
CSS:
.one-third {
width: 30%;
display: inline-block;
margin: 5% 0 0 2.5%; }
.one-third img {
width: 100%;
height: 300px; }
.one-third p {
margin: 0.5em; }
.tattoo-text {
width: 60%;
margin: 50px; }
.tattoo-h {
font-size: 25px; }
.tattoo-pic {
width: 60%;
float: right;
margin: 10px; }
.quaint-street-pic {
width: 60%;
float: left;
margin: 10px;
height: 300px; }
.social-icons {
float: right;
margin: 100px 100px 0 0; }
I am creating a widget page using asp.net 4.0 and bootstrap which is going to be accessed across a variety of different screens so I need to have the main content responsive to grow/shrink based on the size of the screen.
My current code is similar to this -
<div class="container-fluid">
<div class="row header">
HEADER ROW
</div><!--/.row-->
<div class="row">
MAIN CONTENT
</div
<footer>
FOOTER GOES HERE
</footer>
</div><!--/.container-fluid-->
So the header and the footer will be 100px or 10% each and I want the main content to expand the height in between the header and footer.
How can I do this without specifying a height in pixels?
Thanks
You can use flex box for this.
div.wrapper {
background:green;
display: flex;
flex-flow: column;
height: 100%;
}
.header {
border-bottom:1px solid black;
flex: 0 1 100px;
}
div.main {
flex: 1 1 auto;
}
footer {
border-top:1px solid black;
flex: 0 1 100px;
}
Example:
https://jsfiddle.net/tqaar3zr/2/
Page A has an iframe (that loads Page B). That Page B has a div#OutputDiv. My goal is to make that div in that iframe scrollable.
SOLUTION (CREDIT TO STEVE!):
Include overflow: auto for that div. However you must specify height too. Simply give any fixed value. eg height: 0.
Use a javascript function to make the div's height always same as the window's, even after window resize. height is now not fixed.
Code:
#outputDiv {
font-size: 12px;
font-family: Arial;
margin-right: 1em;
overflow: auto;
overflow-x: hidden; (optional)
-webkit-overflow-scrolling: touch; (enable smooth scrolling on mobile)
height: 0; (omit-able)
}
$(window).resize(function(){
$("#outputDiv").css("height",0).css("height",$(this).height());
});
$(window).trigger("resize");
TL;DR Full story
Page A.html - has an iframe to load Page B. When on Page A, that div#OutputDiv in that iframe must be scrollable. Works fine on PC but not scrollable on iPad/Android. Page structure:
Page B.php - Left half div#OutputDiv, right half div#map-canvas containing Google Maps.
(Sidenote: I think the #map-canvas CSS is pretty unchangeable, for example changing something may cause the Maps to extend height beyond browser height, which is not what I want.)
Page A.html
<style type="text/css">
#title-banner {
position: fixed;
top: 0;
left: 0;
width: 100%;
}
#real-time-alert {
margin-top: 155px;
margin-left: 10px;
}
.tab-content {
border-left: 1px solid #ddd;
padding: 10px;
height: 100%;
}
#map {
height: 100%;
}
.nav-tabs {
margin-bottom: 0;
}
#panel {
position: fixed;
top: 120px;
right: 10px;
bottom: 10px;
left: 350px;
}
iframe {
width: 100%;
height: 100%;
}
</style>
<body>
<div id="title-banner" class="well"><h1>Real-time incident updates</h1></div>
<div id="real-time-alert">
DEMO:<br>
<a id="demolink" style="cursor: pointer; font-weight: bold;">22/11/2013, 0.32.18AM: 3.128268, 101.650656<br></a>
</div>
<div id="panel">
<ul class="nav nav-tabs" id="myTab">
<li class="active"><a data-toggle="tab" href="#map">Map</a></li>
<li><a data-toggle="tab" href="#message">Messages</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="map"><iframe seamless name="map-report"></iframe></div>
<div class="tab-pane" id="message"></div>
</div>
</div>
</body>
Page B.php
*for div#map-canvas, I had to do the code below, or else when I hover on the page, div#OutputDiv will disappear. This may be not important.
$("*").hover(function(){
$("#map-canvas").css("position","fixed"); });
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map-canvas {
height: 100%;
width: 50%;
}
#content-pane {
float:left;
width:48%;
padding-left: 2%;
}
#outputDiv {
font-size: 12px;
font-family: Arial;
margin-right: 1em;
}
</style>
<body>
<div id="content-pane">
<div class='well well-small' id="inputs" style="margin: 1em 1em 0 0">
<b>TESTING ONLY</b> <br>
<label for="originLat">Incident Site: </label><input type="text" id="originLat" style="width:6em;" />
<input type="text" id="originLng" style="width:6em;" />
<button type="button">Calculate distances</button>
</br>eg. 3.126547,101.657825
</div>
<div id="outputDiv"></div>
</div>
<div id="map-canvas" style="position: fixed; right: 1px;"></div>
</body>
I can't see any overflow controls specified in the CSS (apologies if I missed them).
Have you tried:
div#OutputDiv { overflow: auto; height: 200px; }
The height is just for testing purposes - but you could use Javascript to get the actual height and apply it using either raw javascript or jQuery.
A good example (including how to detect orientation changes if device goes portrait to landscape or similar) can be found on:
How do I get the new dimensions of an element *after* it resizes due to a screen orientation change?
I'm using the Twenty ten theme.
I don't know if it matters, but to make the footer stretch all the way out of the page (100%), I put it outside the wrapper div, so instead of:
<wrapper>
<main>
</main>
<footer>
</footer>
</wrapper>
I've put it this way:
<wrapper>
<main>
</main>
</wrapper>
<footer>
</footer>
The css for the footer looks like this:
#footer {
height: 100px;
background:#393939;
font-size:12px;
color:#777;
margin:0;
padding:20px;
z-index:999;
bottom:0;
clear:both;
}
The footer now lays directly under all the content, so if the content of a page is too short, the footer is not in the bottom of the page, like on this page:
http://skiss.nu/hff/?page_id=10
if I add "position: absolute;" the footer stays at the bottom of this page, but it is laying over the content om pages with more content.
You need to have your position as 'fixed'.
#footer {
height: 100px;
background:#393939;
font-size:12px;
color:#777;
margin:0;
padding:20px;
z-index:999;
bottom:0;
clear:both;
position:fixed;
}
You could add a min-height to your wrapper div like so:
wrapper {
min-height: 600px;
}
That won't look awesome on all screen sizes, but its a quick way to get the job done.