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/
Related
I need help keeping my footer stuck to the bottom, but not overlap the upper elements either. I'm still fairly new/rusty to this since it took me 2 years to find a web job after college, so I haven't kept up as much as I should have.
Anyways,
This is the format of the html I have. I want the "footer" to be stuck at the bottom so when they scroll up from the bottom it stays. But I also don't want it to be pushed up too high to make white space below it.
I've been trying to use a "position: absolute" style for the footer to keep it on the bottom. But I just read somewhere this bumps it out of the regular flow and that's what causes overlapping.
So how can I reformat my styles to allow the footer to stay below, but not overlap?
HTML:
<html>
<header></header>
<body>
<div class="content">
<div class="hd">Content of header</div>
<div class="bd">Content of body</div>
<div class="ft">Content of footer</div>
</div>
</body>
</html>
CSS: (basic parts)
div {
display: block;
}
*, *:before, *:after {
box-sizing: inherit;
}
.hd {
position: static;
flex: 0 0 auto;
}
.bd {
position: relative;
flex: 1 0 auto;
}
.ft {
position: absolute;
bottom: 0px;
flex: 0 0 auto;
}
Just add a margin to the bottom of your body equal to your footer's height.
So if your footer has a height of say, 100px, then you need to add this to your css:
body {
margin-bottom: 100px;
}
I followed the instructions from the link that sweaver2112 suggested, and I had to remove a few duplicate elements and change others, and I finally got the footer to not overlap. Had to use flex to get it to work with the other div elements
.content {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.ft {
flex: 0 0 50px;
margin-top: auto;
}
Thank you all for the support!
Link for answer purposed that I used: LINK
I think you might be looking for position: fixed;
Ex:
.footer {
position: fixed;
bottom: 0;
}
This sticks the footer at the bottom of the window regardless of the content so when you scroll the footer will always stay at the bottom. This will however be above the content (overlap), so you need to also apply AndrewL's option to keep the content from going under the footer.
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; }
Is it possible to use the jQuery mobile controlgroups both horizontally AND vertically at the same time? I'd like to create button groups of e.g. 3x3 or 4x4 buttons without any space between them. Using three horizontal controlgroups with three buttons each leaves me with space between the "rows".
Thanks!
You can use a jQM grid and force 0 margins on the buttons. Then apply rounded corners just to the buttons at the corners of the grid:
<div class="ui-grid-b gridControlGroup" >
<div class="ui-block-a">1</div>
<div class="ui-block-b">2</div>
<div class="ui-block-c">3</div>
<div class="ui-block-a">1</div>
<div class="ui-block-b">2</div>
<div class="ui-block-c">3</div>
<div class="ui-block-a">1</div>
<div class="ui-block-b">2</div>
<div class="ui-block-c">3</div>
</div>
.gridControlGroup .ui-btn {
margin: 0 !important;
}
.gridControlGroup .ui-block-a:nth-child(1) .ui-btn {
border-top-left-radius: 5px;
}
.gridControlGroup .ui-block-c:nth-child(3) .ui-btn {
border-top-right-radius: 5px;
}
.gridControlGroup .ui-block-a:nth-last-child(3) .ui-btn {
border-bottom-left-radius: 5px;
}
.gridControlGroup .ui-block-c:nth-last-child(1) .ui-btn {
border-bottom-right-radius: 5px;
}
Here is a DEMO
I'm trying to put a div inside another div that stretches to the full height of the screen and center it vertically, like so:
Preview http://f.cl.ly/items/1a3L46453f0D271V1O2w/Schermafbeelding%202013-04-02%20om%2021.37.25.png
The large photo is the full screen div, the white band is the vertically centered div.
The solution below works gracefully on all possible computers and browsers that I tried... except for Mobile Safari.
For some reason, Mobile Safari (at least on iPad) decides to put the nested div 50% down the page instead of 50% down its parent div.
HTML:
<div class="band full">
<div class="band">
*content*
</div>
</div>
SCSS (irrelevant tags removed):
div.band{ //General styling for div.band elements
margin: 0px;
padding: 80px 0px;
width: 100%;
&.full{ //Style the parent div
height: 100%;
}
div.band{ //Style the nested div
position: relative;
top: 50%;
margin-top: -200px;
padding: 20px 0px;
height: 400px;
}
}
I've got a nagging feeling that this is a bug in Mobile Safari. I sure hope it isn't. Does anyone know how to fix this?
I really did my best to solve this in a clean manner, but I ran some more tests and it's clearly a bug in Mobile Safari's rendering engine. I decided to solve it with an admittedly dirty jQuery hack, but at least it works now.
My page had one of these full screen photos with a band in the middle on the very top, and another one on the very bottom of the page. The top one was easy to solve: just use absolute positioning instead of relative (which was positioning relatively to the top of the page anyway). The "top" property of the bottom band, on the other hand, has to be recalculated based on the height of the page after setting its positioning to absolute. I solved this by setting the "top" property to this: vertical offset from the top of the page to the bottom band + (the height of the full screen band to center in / 2).
Or in code form:
$(window).load(function() { //Wait until the page is fully loaded
if (navigator.userAgent.match(/(iPod|iPhone|iPad)/)) { //If the user is using an iDevice
$('div.band#top div.band').css('position', 'absolute');
$('div.band#bottom div.band').css('position', 'absolute');
$('div.band#bottom div.band').css('top', $('div.band#bottom').offset().top + ($('div.band#bottom').height() / 2));
}
});
check this out. Not tested on mobile but should work
HTML
<div class="panel">
<div class="panelInner">
<div class="box">
<div class="boxInner">hi there</div>
</div>
</div>
</div>
CSS
html {
min-height: 100%;
height: 100%;
}
body {
height: 100%;
margin: 0;
}
.panelInner {
padding: 40px;
text-align: center;
display: table-cell;
vertical-align: middle;
}
.box {
height: 200px;
background: #999;
display: table;
width: 100%;
}
.boxInner {
display: table-cell;
vertical-align: middle;
}
And here's a fiddle
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;
}