I want to know how do you guys make the header-side-main-footer layout in html.
Like this:
<html>
<div class="header"></div>
<div class="content">
<div class="side"></div>
<div class="main"></div>
</div>
<div class="footer"></div>
</html>
The div.header and the div.footer have a fixed height. And the div.content will hold all the rest height,no scroll bar for the body.
And the div.side will have a fixed width,and the div.main will hold all the rest width.
The div.side can have y-scroll bar.
When the window resize,the div.content will expand to fix the height,no scroll bar.
BTW,sometimes the div.side and the div.main may exchange the position like this:
<html>
<div class="header"></div>
<div class="content">
<div class="main"></div>
<div class="side"></div>
</div>
<div class="footer"></div>
</html>
How to you make it?
update:
div.main can not made as overflow:hidden,since it is the container which I use for ceate the map.
var map=new google.maps.Map('main',{});
Gave div.side a height and width and then overflow:scroll
Like:
div.side{
height:60%;
width: 60%;
overflow: scroll;
}
and div.content overflow:hidden
That is how I would do it in html, well I would add a wrapper around it to make centering easy, but that is just me. I think you want to know about the css, and to be hones, there are going to be many ways one might go about that, the simples being:
.header {
width:whateverpx;
margin:0 auto;
}
.content {
width:100%;
position:relative;
}
.content:after {
clear:both;
content:"";
display:none;
}
.side {
float:left;
position:relative;
width: your width for it;
}
.main {
float:left;
position:relative;
}
.footer {
height: whateverpx;
width: whateverpx;
margin:0 auto;
}
and, if you want the content centered add a wrapper around it and add
.wrapper {
width:whatever;
marging:0 auto;
}
or
no wrapper, do this for .content instead
.content {
width: whatever
margin:0 auto;
position:relative;
}
Related
I've got the following setup:
header,
content - which needs to be full height of the browser,
and footer
The current setup below is how I want it (when the browser is opened fully). Basically the content div should have 100% height and you simply scroll to view the footer. The amount you scroll is based on the height of the footer. The content will be a simple login form. I've added in a div with a fixed height to demo my issue (The login div could be any height). However the problem is when the browser is resized vertically. This is the tricky bit to explain:
My question is how do I prevent the footer from overlapping the content div? I'd like the footer to snap to the bottom of the content div. As the browser window gets shorter, i'd like the content div to still remain 100% in height. The browser will cut the content div as it gets vertically shorter (which is fine) but I'd like the footer underneath the content div and still want to only be able to scroll to the height of the footer.
I think i'm missing margin-bottom somewhere but not quite sure where. Could someone please help with this issue. Thanks in advance.
the html:
<body>
<div class="wrapper">
<div class="content">
<div class="loginPanel">
</div>
</div>
</div>
<div class="footer">
footer, hidden until scrolled
</div>
</body>
the css:
html, body {
height:100%;
padding:0;
margin:0;
}
.wrapper {
height:100%;
background:orange;
}
.content {
background:grey;
width:100%;
height:100%;
}
.footer {
background:purple;
height:200px;
width:100%;
color:#fff;
}
.loginPanel {
width:600px;
height:300px;
background:green;
margin:0 auto;
}
You should be able to achieve what you want with the following:
html, body {
height:100%;
padding:0;
margin:0;
position:relative;
}
.wrapper {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
}
.content {
background:grey;
width:100%;
min-height:100%;
}
.footer {
height:200px;
width:100%;
}
.loginPanel {
width:600px;
height:300px;
background:green;
margin:0 auto;
}
<div class="wrapper">
<div class="content">
<div class="loginPanel"></div>
</div>
<div class="footer">footer, hidden until scrolled</div>
</div>
You can try adding a margin-bottom to the <body> or <html> element; that should fix your issue.
<div class="page-wrap">
Content!
</div>
<footer class="site-footer">
I'm the Sticky Footer.
</footer>
CSS
* {
margin: 0;
}
html, body {
height: 100%;
}
.page-wrap {
min-height: 100%;
/* equal to footer height */
margin-bottom: -142px;
}
.page-wrap:after {
content: "";
display: block;
}
.site-footer, .page-wrap:after {
height: 142px;
}
.site-footer {
background: orange;
}
I want to achieve the following behavior with HTML and CSS on a single webpage
I got the first three areas to work (black, red, blue) but I had problems with the scrollable content (green). It works with static height, but I don't know how to fill the rest of the page dynamically.
Here is what I got
Link to Code
<div class="body">
<div class="menu">
menu
</div>
<div>
<div class="dynamiccontent">
<div class="errorheader">
Errors
</div>
<div class="errorcontent">
errors
</div>
<div class="fixedtext">
some text
</div>
<div class="fillcontent">
fillcontent
</div>
</div>
</div>
.body
{
background:red;
margin:0 auto;
width:100%;
top:0px;
}
.menu
{
background:black;
color: white;
height: 100px;
}
.dynamiccontent
{
position:fixed;
top:50px;
margin:0px auto;
width:100%;
background: red;
}
.errorheader
{
color: white;
text-align: center;
font-size: 1.4em;
}
.errorcontent
{
color: white;
text-align: center;
}
.fixedtext
{
background: blue;
color: white;
position: relative;
}
.fillcontent
{
background: green;
position: relative;
overflow: auto;
z-index: 1;
height: 400px;
}
A nice to have would also be the use of the "browser-scrollbar" on the right side (not only a short local scrollbar in the green content-box).
Thank you for your help!
Using overflow:hidden to the html,body,.main and overflow:scroll to the .main-content, you can simulate what you need.
HTML:
<div class="main">
<div class="header">header</div>
<div class="dynamic-content">
<div class="dynamic-content-text">
dynamic-content-text<br/>...
</div>
<div class="dynamic-content-fixed">dynamic-content-fixed</div>
</div>
<div class="main-content">
main-content<br />...
</div>
</div>
CSS:
html,body, .main{
margin:0;
padding:0;
height:100%;
overflow: hidden;
}
.header{
position: fixed;
left:0;
right:0;
height:50px;
background: red;
}
.dynamic-content{
padding-top:50px;
}
.dynamic-content-text{
background:yellow;
}
.dynamic-content-fixed{
background:blue;
}
.main-content{
background:green;
height:100%;
overflow: scroll;
}
JSFiddle
You could achieve this with jQuery/ javascript.
First check if the page has a scrollbar, if there is no adjustment is needed. If not, the last container needs to be stretched to fill the rest of the window space.
Add the container heights together and subtract from the window height then set that as height for the last container.
Just have method like (Not tested)
$(document).ready(function(){
if(!hasScrollbar()) {
var filled = $(".errorheader").outerHeight() + ... ;
$(".fillcontent").height($(window).height()-filled);
}
});
There are a lot of code for finding if the window has a scrollbar, check here on stackoverflow. If you expect the users to resize the window you could add a callback for $(window).resize();
Another possible solution would be to use the body element to fake that the last container expands. If the containers are identified by their background you could just use the same background for as the last container. Just remember to set the body to fill 100%.
I can't set a height (in %) to a div (class="item") whose parent (class="site-section") has a min-height: 100%.
This is my HTML:
<div class="spacer"></div>
<header class="site-header"></header>
<div class="spacer"></div>
<div class="spacer"></div>
<section class="site-section">
<div class="column">
<div>I would like to be able to set an later
change the height of this green item.
<div class="item">ITEM</div>
</div>
</section>
<div class="spacer"></div>
<div class="spacer"></div>
<footer class="site-footer"></footer>
<div class="spacer"></div>
This is my CSS:
html, body {
height:100%;
margin 0;
color:blue;
}
.spacer {
height:1%;
}
.site-header {
height:8%;
background-color:yellow;
}
.site-section {
min-height:78%;
background-color:#ffcccc;
color:#aaa;
}
.site-footer {
height:8%;
background-color:yellow;
}
.column {
width: 50%;
}
.item {
height: 40%;
background-color: #33cc33;}
Here is the DEMO.
Everything was working fine until I added DOCTYPE to my HTML. There was no need to set height (in %) for html, body and .site-section, so .item was having his height: 20%. Now, because of DOCTYPE I need to set height for html, body, and .site-section. The consequence is that .item does not react to height: 20% anymore.
Any idea how to solve this?
P.S. I've based my demo on Bart's demo in this question.
#CBroe is correct in that you can't really get a height percent unless the parent itself has a height (ex. height: 35px). I would recommend setting the height of the div, then your inside divs can be set to percentages.
But I played a tiny bit with your fiddle and didn't know if adding position: absolute to the your class item CSS is sort of what you're looking for? So your CSS would look something like this:
.item {
position: absolute;
height: 40%;
background-color: #33cc33;
}
Here is the demo modified to show the example.
NOTE: Even though the height is flexible, if you set the height to 100% it will go above the rest of the divs.
.item{
position:absolute;
height:40%;
background:#33cc33;
}
.items {
position:relative;
height:100%;
background:inherit;}
HTML
<div class="item">
<div class='items'>
ITEM Try
</div>
</div>
Try :)
My HTML looks like the following, without the content though as the following is only needed to answer my question:
<html>
<body>
<div class="container">
<div class="socialmedia"></div>
<div class="navbar"></div>
<div class="mainbody></div>
<div class="footer"></div>
</div>
</body>
</html>
I've been trying to get my footer to remain at the bottom of my webpage, beneath .mainbody. The problem though, is that the footer seems to sit at the bottom of my window only, not at the bottom of the webpage which could extend well below my actual window when I have a lot of content. Right now, I have all the div's above set to position "absolute"; as well the html and body are styled in the following way:
html, body{
height:100%;
margin:0;
padding:0;
}
html { background: url(/img/multiblock.png)repeat center center fixed; }
}
Now, the only way I can get my footer to remain at the bottom of the webpage is to set top:-3998px (or whatever the height of my largest window is). Obviously this won't work once a webpage has enough content on it to expand it past that height. If I set position to relative, it appears at the top of my whole webpage and when positioned absolute it appears at the bottom of the viewable window only. You can check out the website at http://www.edmuncovered.com to see what I mean or to check the rest of the code. Parts of my website include adding content every day or so so I want to make sure the webpage can increase in height with added content, but that the formatting stays the same and the footer obviously stays at the bottom. Any ideas?
I guess this is what you need...
HTML
<div id="container">
<div id="header"></div>
<div id="body"></div>
<div id="footer"></div>
</div>
CSS
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
background:#ff0;
padding:10px;
}
#body {
padding:10px;
padding-bottom:60px; /* Height of the footer */
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px; /* Height of the footer */
background:#6cf;
}
http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
You can try something like this:
CSS:
.socialmedia, .navbar, .mainbody, .footer
{
border: 1px solid grey;
margin-top: 5px;
width: 800px;
}
.socialmedia
{
height: 20px;
}
.mainbody
{
min-height: 980px;
}
.footer
{
height: 25px;
}
Html:
<div class="container">
<div class="socialmedia">Social Media</div>
<div class="navbar">Navbar</div>
<div class="mainbody">Mainbody</div>
<div class="footer">Footer</div>
</div>
Working jsFiddle: http://jsfiddle.net/LrfXr/
I'm going to assume this is a questions similar to the one here: How to Stop Sticky Footer at Content DIV
At which there are a few good answers.
Links on that page:
http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
http://twitter.github.io/bootstrap/examples/sticky-footer.html
Basically you're looking for a footer that attaches itself to the bottom of the viewport but also extends should the content push it off the viewport. Martin Bean and Ryan Fait have the best methods of this. The bootstrap's method is a variation of this method too.
Happy hunting.
Here is the jsFiddle link. Followings are your css and html code:
HTML code
<div class="container">
<div class="socialmedia">Social Media</div>
<div class="navbar">Navbar</div>
<div class="mainbody">Mainbody</br>Mainbody</br>Mainbody</br>Mainbody</div>
<div class="footer">Footer</div>
</div>
CSS
*{
margin:0;
padding:0;
}
body {
background-color:#E4E2E2;
color:#fff;
}
.container {
min-height:100%;
/*position:relative;*/
}
.socialmedia {
background-color:#186301;
padding:10px;
}
.navbar {
background:#A60206;
padding:10px;
min-height:30px;
}
.mainbody {
padding:20px;
background-color:#6D0594;
}
.footer {
position:absolute;
bottom:0;
padding:2%;
background-color:#000;
width:96%;
}
This is working for me:
http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
In short, use this:
CSS
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}
.footer, .push {
height: 4em;
}
HTML
<html>
<head>
<link rel="stylesheet" href="layout.css" ... />
</head>
<body>
<div class="wrapper">
<p>Your website content here.</p>
<div class="push"></div>
</div>
<div class="footer">
<p>Copyright (c) 2008</p>
</div>
</body> </html>
I've got some code:
<body>
<div id="container">
<div id="top"></div>
<div id="bottom"></div>
</div>
</body>
Container width is for example 900px.
At the #top i set a background using body.
But I can't use background in the #bottom becouse it will crashed when it will be wider eg 1080px(background will be seen only on the #container). How to do this?
edit1:
body
{
background-image: url("images/bg_main.png");
background-repeat:repeat-x;
}
#top
{
background-image: url("images/top_bg.png");
height:50px;
}
#container
{
margin: 0;
width: 1024px;
background:#fff;
}
#footer
{
background-image:url("images/bottom.png")
}
but it creates inside container (i need to create bottom bg outside container, when site wiill be wider)
edit2:
I think that I found an solution:
html{;background-image:url('images/bottom.png');background-repeat:repeat-x;background-position:left bottom;}, and then set div height as a bottom.png
Do you mean something like this?
html:
<body>
<div id="container">
<div id="top"></div>
<div id="bottom"></div>
</div>
<div id="footer"></div>
</body>
and with the addition of the following css:
#footer
{
width:100%;
height:40px; //Or something else you'd like
background-color: yellow; //Or the image you want
}
I suggest try placing your #bottom outside #container than, because within #container you can't raise your width more than that of #container.
Try this:
#container{
width:1024px; //or whatever
}
#bottom{
height:40px; //or whatever
width:100%;
background:url("images/bottom.png") repeat-x center;
}