I want to build a page in three sections:
A header of fixed height
A main section that is liquid
A footer of fixed height
I want the page to have a minimum height so that the bottom of the footer is flush with the bottom of the window. I want the main section in the middle to stretch, even when the contents of the main section are too short.
I know I could probably do this with JavaScript but I'd prefer to use a CSS solution if there is one.
I've tried various versions of the following code, but the main section is only expanding as far as its contents will push it:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<style>
body, header, main, footer {
width:100%;
display:block;
}
body{
display:block;
position:relative;
height:100%;
min-height:100%;
padding:0;
margin:0;
}
header{
background-color:#ccc;
height:100px;
}
footer{
height:100px;
background-color:#ccc;
}
main {
border:1px solid #f00;
}
#wrapper{
height:100%;
min-height:100%;
}
</style>
</head>
<body>
<div id="wrapper">
<header>
Header
</header>
<main>
Main
</main>
<footer>
Footer
</footer>
</div>
</body>
</html>
I do believe something like this would work. Demo
<div class="container-main">
<div class="header">header</div>
<div class="wrapper">
<div class="container-fluid">
<div class='one '>one</div>
<div class='two '>two</div>
<div class='three '>three</div>
</div>
</div>
<div class="footer">footer</div>
</div>
CSS:
html, body {
color:#fff;
width:100%;
height:100%;
margin:0;
}
.container-main {
display:table;
width:100%;
height:100%;
box-sizing:border-box;
background:#efefef;
padding:4px;
border:1px solid red;
}
.wrapper {
display:table-row;
height:100%;
}
.container-fluid {
display:table-cell;
padding:10px;
background:#e1e1e3;
border:1px solid blue;
}
.one {
background:#888;
}
.two {
background:#666;
}
.three {
background:#555;
}
.one, .two, .three {
height:80px;
}
.footer {
background:#000;
display:table-row;
}
.header {
background:#000;
display:table-row;
}
Related
I've been trying to get this layout to work for smart phones. What I'm looking to do is have a fixed header that doesn't move and then have a flex container underneath the header that takes up the rest of the screen space. Inside the flex container should be 3 sections of the same size that each takes up the size the flex-container.
My current attempt isn't working. I can't figure out how to keep the fixed header from moving and I can't figure out how to get the flex container the right size with each of the sections.
<!DOCTYPE html>
<html>
<head>
<meta name="apple-mobile-web-app-capable" content="yes">
<title>scroll</title>
<style>
html{
margin:0;
padding:0;
height:100%;
}
body{
margin:0;
padding:0;
height:100%;
}
#container{
height:100%;
overflow:scroll;
}
#fixed{
postion:fixed;
top:0;
height:20%;
background-color:lightblue;
}
#flex-container{
display:flex;
flex-direction:column;
justify-content:space-around;
height:80%;
}
.sections{
height:80%;
}
#section1,#section3{
background-color:blue;
}
</style>
</head>
<body>
<div id='container'>
<div id='fixed'>
</div>
<div id='flex-container'>
<div id='section1' class='sections'>
</div>
<div id='section2' class='sections'>
</div>
<div id='section3' class='sections'>
</div>
</div>
</div>
</body>
</html>
If you set the position to fixed or absolute, the element's position must be definite. You either have to additionally set the navbar's width to 100%, or add both the left: 0 and right: 0 properties. Also, don't set each of your sections to height: 80%, but only the flex container. Ensure that each flex item has the flex: 1 property.
Your code should now look like this:
<!DOCTYPE html>
<html>
<head>
<meta name="apple-mobile-web-app-capable" content="yes">
<title>scroll</title>
<style>
html{
margin:0;
padding:0;
height:100%;
}
body{
margin:0;
padding:0;
height:100%;
}
#container{
height:100%;
overflow:scroll;
}
#fixed{
postion:fixed;
top:0;
height:20%;
width: 100%;
background-color:lightblue;
}
#flex-container{
display:flex;
flex-direction:column;
justify-content:space-around;
height:80%;
}
.sections{
flex: 1;
}
#section1,#section3{
background-color:blue;
}
</style>
</head>
<body>
<div id='container'>
<div id='fixed'>
</div>
<div id='flex-container'>
<div id='section1' class='sections'>
</div>
<div id='section2' class='sections'>
</div>
<div id='section3' class='sections'>
</div>
</div>
</div>
</body>
</html>
I have the following layout (Parent div, two child divs)
wanted to make this layout responsive for browser's width, so anytime the user changes the browser's width this layout should occupies the same area of screen
also, I wanted to middle-text the content, I've tried vertical-align: middle;, display: table-cell;
any suggestions?
Markup here
this is your solution html with css
<html>
<head>
<title>test</title>
<style>
.main{
width:97%;
border:1px solid #000;
height:100px;
padding:1%;
}
.subone{
width:30%;
border:1px solid #000;
float:left;
height:100px;
margin-right:2%;
}
.subtwo{
width:67%;
border:1px solid #000;
float:left;
height:100px;
}
</style>
</head>
<body>
<div class="main">
<div class="subone">
</div>
<div class="subtwo">
</div>
</div>
</body>
</html>
I have created you a fluid layout, with your divs. You do not need to use media queries.
And also to use
vertical-align:middle;
you must put
display:table;
on the parent div and you must not float the divs inside.
You can check this example
will it be helpful???
use diplay:table; for parent and display:table-cell for childs..decalare parents width in percentage with overflow:hidden;
HTML::
<div class="parent">
<div class="first"></div>
<div class="second"></div>
</div>
CSS ::
.parent{
display:table;
width:80%;
border-spacing:4px;
border:2px solid black;
overflow:hidden;
}
.first{
text-align:center;
display:table-cell;
border:2px solid black;
width:100px;
height:200px;
}
.second{
text-align:center;
display:table-cell;
border:2px solid black;
height:200px;
}
FIDDLE
The footer should remain in the bottom even when i re size the page. In my case footer is overlapping the contents when i re size the height of the page.
.body{
background: #00b7ea; /* Old browsers */
font-family:Arial, Helvetica, sans-serif;
font-size:85%;
height: 100%;
}
.container{
min-height:100%;
position: relative;
}
.formContainer{
width:30%;
height: 100px;
background-color:#fff;
margin:auto;
padding-top: 0;
border-radius:5px;
box-shadow:5px 5px 55px #9999;
padding-bottom:60px;
}
.footer{
position:absolute;
width:100%;
bottom:0;
height:60px;
background-color:#333;
}
<body class="body">
<header class="header">
</header>
<div class="container">
<div class="formContainer">
</div>
<footer class="footer">
</footer>
</div>
</body>
You should move footer tag out of the div
<header class="header">
</header>
<div class="container">
<div class="formContainer">
</div>
</div>
<footer class="footer">
</footer>
DEMO
Add height:100% to html and body, then only your container takes height 100% and leave your html code as it is.
html, body{
height:100%
}
DEMO 2
P S - I think .body in your CSS is a mistake, it should be only body
What you need is Sticky Footer, there are couple of ways to implement it.
http://css-tricks.com/snippets/css/sticky-footer/ (using CSS)
http://josephfitzsimmons.com/home/simple-sticky-footer-using-jquery/ (using jQuery)
try this
http://jsfiddle.net/WPYCJ/
.footer{
position:fixed;
width:100%;
bottom:0;
height:60px;
background-color:#333;
}
Try this. Thanks
CSS
.body{
background: #00b7ea; /* Old browsers */
font-family:Arial, Helvetica, sans-serif;
font-size:85%;
height: 100%;
}
.container{
height:90%;
background-color:#fff;
}
.formContainer{
width:100%;
height: 100px;
margin:auto;
padding-top: 0;
border-radius:5px;
box-shadow:5px 5px 55px #9999;
padding-bottom:60px;
}
.footer{
width:100%;
bottom:0;
height:5%;
background-color:#333;
}
HTML
<body class="body">
<header class="header">
</header>
<div class="container">
<div class="formContainer">
</div>
</div>
<footer class="footer">test
</footer>
</body>
I Had the same problem, I used this code :
<script>
var top = $(document).height() - $("footer.main-footer").height() ;
$("footer.main-footer").css('top' , top);
</script>
Change .main-footer to your footer's class.
I have copied the javascript of iscroll-lite from here
html code
<div id="wrapper" class="wrapper">
<div id="wrapper-container" class="wrapper-container">
<div id="header" class="header">
<div id="header_title" class="header_title"> </div>
<div id="abc" class="abc"><img src="img/abc.png""/> </div>
</div>
<div id="images" class="images"><img name="slide" src="img/abc.png" width=100%; />
</div>
<div id="description" class="description">
<div id="title" class="title">
<h1><strong></strong></h1>
</div>
<div id="desc" class="desc">
</div>
</div>
<div id="footer" style="background-image:url(img/bar.png);" class="footer">
<div id="footer_text" class="footer_text">footer_text</div>
<div id="image" class="image noSelect"><img src="img/info.png" onclick="info()"/></div>
</div>
</div>
The content of desc tag is going to overflow
CSS
.wrapper
{
position: absolute; width:auto; margin:0 auto; height:100%; overflow: hidden;
}
.wrapper_other
{
width:auto; margin:0 auto; height:100%; overflow: hidden;
}
.wrapper_container
{
width:100%; margin:0 auto; font-family:Arial, Helvetica, sans-serif;
}
.header
{
float:left; height:100%; min-height:100%; margin:0%; width:96%; padding:3% 2% 0;
}
.header_title
{
float:left; padding:0%; margin:0%; height:100%; min-height:100%; font-size:22px; color: #FFFFFF; text-align:center; font-weight: bold; width:80%;
}
.images
{
position:relative; width:100%;
}
.description
{
float:left; width:100%; overflow:auto; height:100%;
}
.title
{
width:85%; font-weight:bold; float:left; font-size:20px; margin-top:3%; margin-bottom:2%; margin-left:5%; color:#FFFFFF;
}
.desc
{
width:90%; font-size:15px; margin-left:5%; margin-right:5%; float:left; color: #FFFFFF; overflow:auto; text-align:justify; line-height:18px; padding:0px 0px 40px 0px;
}
.desc p
{
margin-top:0;
}
.footer
{
width:100%; position:absolute; bottom:0; font-size:11px; color:#FFFFFF; text-align:center; height:30px;
}
.footer_text
{
text-indent:1%; float:left; text-align:center; width:75%; margin-top:2%;
}
.info
{
width:25%; float:right; padding-top:1%;
}
USING iscroll
<script type="text/javascript" charset="utf-8" src="iscroll.js"></script>
<script type="text/javascript" charset="utf=8" src="cordova-2.1.0.js"></script>
var myScroll;
document.addEventListener("deviceready", onDeviceReady, false);
function scroll()
{
myScroll = new IScroll('.wrapper', { scrollX:false , scrollY:true});
}
----
----
function onDeviceReady()
{
scroll();
----
----
On scrolling,I just get the following
W/webview(3101): Miss a drag as we are waiting for WebCore's response for touch down.
PROBLEM:
It is is not scrolling.If at all it does after great effort on it but,it scrolls only once.I go back to the main page and return it does not scroll at all.
I have tried implementing the iscroll java script for my application as a remedial process for the CSS position:fixed that does not work in android 2 and 3 versions using cordova 2.1.0
Please,Guide me!!
This is answered here.
The concept was implementing with the tags such as <ul> and <li> within the <wrapper> and <scroller> div.
Excellent answer!
I'm looking to have a slide(down) toggle but would like the panel to line up neatly along the left edge of the button. I don't want to hard code margin, position, px, etc but want the slide down panel to always be "in relation" to (and relative) the (left bottom of) button.
What am I missing?
<!doctype html>
<head>
<script src='http://code.jquery.com/jquery-1.7.2.min.js'></script>
<style type="text/css">
.slideToggleBox{
float:left;
padding:8px;
margin:16px;
border:1px solid red;
width:200px;
height:50px;
background-color:blue;
color:white;
position:fixed;
left:-10.5px;
top:2.3%;
}
.clear{
clear:both;
}
</style>
</head>
<body>
<div class="clear">
<button id=slideToggle>slideToggle()</button>
<br/>
<div class="slideToggleBox">
slideToggle()
</div>
</div>
<script type="text/javascript">
$("#slideToggle").click(function () {
$('.slideToggleBox').slideToggle();
});
</script>
</body>
</html>
Try this code. Added a demo here
HTML
<div class="wrapper">
<button class=slideToggle>slideToggle()</button>
<div class="slideToggleBox">slideToggle()</div>
</div>
<div class="wrapper">
<button class=slideToggle>slideToggle()</button>
<div class="slideToggleBox">slideToggle()</div>
</div>
CSS
.wrapper{
float:left;
width:200px;
}
.slideToggleBox {
float:left;
border:1px solid red;
width:200px;
height:50px;
background-color:blue;
color:white;
margin-top: -1px;
margin-left:1px;
}
JS
$(".slideToggle").click(function () {
$(this).next().slideToggle();
});