I know there have been plenty of questions regarding sticky footers, but I can't seem to get them to work on my page.
Can anyone help me make my footer sticky, not fixed?
My HTML
<div id="container">
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
My CSS
#container {
width: 980px;
min-height: 100%;
margin-left: auto;
margin-right: auto; }
#content {
width: 100%;
min-height: 100%;
margin: 40px 0; }
#footer {
width: 3000px;
min-height: 185px;
background-color: rgb(0,173,239);
margin-left: -1000px; }
I have tried various positions (relative, fixed etc) but it doesn't work. I seem to get my footer fixed and covering content. Any suggestions?
Try this CSS:
body {
min-height: 100%; }
#container {
width: 980px;
min-height: 100%;
margin-left: auto;
margin-right: auto; }
#content {
width: 100%;
min-height: 100%;
margin: 40px 0;
margin-bottom: 290px; }
#footer {
width: 100%;
min-height: 185px;
background-color: rgb(0,173,239);
position: fixed;
bottom: 0;
left: 0;
right: 0; }
Related
I just started learning HTML. In my HTML there is a div containing an image and an h1 tag. Now the h1 is coming under the div. How to position that h1 on the center of the image?
<div class="headwrap">
<div class="headimage"><img src="images/Header-image1.jpg">
<h1 class="headtxt"> I Love Photography</h1>
</div>
</div>
Css:
.headwrap {
margin: 0;
max-width: 1500px;
width: 100%;
height: 100%;
}
.headimage {
max-width: 1500px;
width: 100%;
}
.headtxt {
margin: 0 auto;
padding: 0;
-webkit-margin-before: 0em;
-webkit-margin-after: 0em;
float: left;
}
You can use position: relative on the parent element and then put position: absolute on the H1 tag:
.headwrap {
margin: 0;
max-width: 1500px;
width: 100%;
height: 100%;
position: relative;
}
.headimage {
max-width: 1500px;
width: 100%;
}
.headtxt {
position: absolute;
top: 0;
}
I have two independently scrolling divs, one with a header and footer.
<body>
<div class="container col-1">
Many listings
</div>
<div class="container col-2">
<div class="header">Fixed Header</div>
<div class="content">Lots of content</div>
<div class="footer">Fixed footer</div>
</div>
</body>
See this fiddle: https://jsfiddle.net/bhmvv05n/
The problem is, I'd like the second container div to have a fixed header and footer that are always visible and have only the content scrollable.
As soon as I change the scrolling of the col-2 div, the two columns don't scroll independently anymore.
Any advice?
Thanks!
This will adjust to whatever width you have for your columns.
The idea is that you only make .col-2.content scrollable, not the whole .container.
* {
box-sizing: border-box;
}
html, body {
margin: 0;
height: 100%;
}
.container {
height: 100%;
}
.col-1{
float: left;
width: 33%;
overflow: auto;
}
.col-2{
float: left;
width: 67%;
position: relative;
}
.col-2 .content {
position: absolute;
left: 0; right: 0;
top: 20px; /* header height */
bottom: 20px; /* footer height */
overflow: auto;
}
.header, .footer {
height: 20px;
background-color: red;
position: absolute;
left: 0; right: 0;
}
.header {
top: 0;
}
.footer {
bottom: 0;
}
Could something like this work for you?
https://jsfiddle.net/vz7eb8uc/
Code changed;
.col-1{
float: left;
width: 33%;
position: relative;
}
.col-2{
float: left;
width: 67%;
position: relative;
}
.header, .footer {
height: 20px;
background-color: red;
position: fixed;
left: 33%;
width:67%
}
This is my code:
The header is in fixed position, and I add a margin and padding zero to body
<body>
<header></header>
<div id="content">
<div id="center"></div>
<div id="a"></div>
</div>
</body>
body {
background-color: gainsboro;
margin: 0;
padding: 0;
}
header {
background-color: black;
width: 100%;
height: 50px;
position: fixed;
top: 0;
}
#content{
margin-left: auto;
margin-right: auto;
margin-top: 60px;
width: 900px;
height: 100%;
}
#a{
background-color: white;
margin-left: auto;
margin-right: auto;
height: 400px;
width: 500px;
border-radius: 2px;
}
Now I want to ask, why is body 60px lower. It should not body always be the top 0?
Here is a picture of this:
body height
The margin-top in your #content is pushing the body down. Please read more on collapsing margins.
I have a wierd problem. I have exactly the same DOM and CSS rendered with React and rendered with pure HTML. However, in React children of the div.container doesn't get the proper height when it's set in %. It works well when it's set with vh or with px, but I can't use those. Any idea why? And how to fix this problem?
div.form label:after, div.wrapper:after, div.container:after {
display: block;
content: '.';
clear: both;
height: 0;
visibility: hidden;
line-height: 0;
padding: 0;
margin: 0;
}
body {
width: 100%;
margin: 0;
min-width: 319px;
min-height: 479px;
background-color:black;
}
div.container {
margin: 0 auto;
width: 100%;
height: auto;
max-height: 1368px;
max-width: 1368px;
min-width: 319px;
min-height: 100%;
position: relative;
background-color:red;
}
nav {
width: 82px;
height: 100%;
height: 100vh;
max-height: 1368px;
float: left;
z-index: 1000;
overflow: hidden;
background-color: #55c7f9;
}
header {
height: 15%;
margin: 0 6%;
float: initial;
position: relative;
width: calc(100% - 80px);
background-color:orange;
}
div.wrapper {
min-height: calc(100% - 62px);
height: auto;
width: calc(100% - 80px);
float: right;
background-color:yellow;
}
div.main {
width: 90%;
height: 100%;
box-sizing: border-box;
margin: auto;
padding-bottom: 10px;
height: calc(100% - 158px);
background-color:green;
}
<body>
<div class="container">
<nav></nav>
<header></header>
<div class="wrapper">
<div class="main"></div>
</div>
</div>
</body>
class is className inside react.
<body>
<div className="container">
<nav></nav>
<header></header>
<div className="wrapper">
<div className="main"></div>
</div>
</div>
</body>
Some advice that might help you..
Add html, along with body.
html, body {
height: 100%;
}
Make sure the div your bundle is being loaded to has height: 100%;. In the case below "root" would need it.
<body>
<div class="root"></div>
<script src="./bundle.js"></script>
</body>
Last case, if you do something like this:
<div>{this.props.children}</div>
Make sure you give this div a className and add it to the list of things that need to be 100%
Okay so I have been working on implementing the 'holy grail'-style layout for my website, so far it's pretty close but I noticed two things I want to fix.
The goal is a 'sticky' footer with the page length expands with the browser window height, a header, and 3 columns. 2 fixed columns on the left and right side, and a fluid column in the middle.
The issues I am having are that right now, my center 'fluid' column doesn't seem to be acting like I expected. Basically I want the fixed columns to always be fully shown, with the center column filling the remaining horizontal space. But the center column is taking up a lot of room and making it so that I have to scroll to view the right column (see image below). Also, the 'text-align: center' code doesn't appear to be centering text within the viewable area of the center column. Any help appreciated!
image: http://i.imgur.com/FPuSiIu.png
html:
<html>
<head>
<link type="text/css" rel="stylesheet" href="test.css" />
</head>
<body>
<div id="header">
<p>Header</p>
</div>
<div id="container">
<div id="center">
<p>Content</p>
</div>
<div id="left">
<p>Content</p>
</div>
<div id="right">
<p>Content</p>
</div>
</div>
<div id="footer">
<p>Footer</p>
</div>
</body>
</html>
css:
* {
margin: 0;
}
#container {
width:100%;
}
#header {
text-align: center;
background: #5D7B93;
height: 95px;
padding: 5px;
position: fixed;
top: 0;
width: 100%;
z-index: 15;
}
#center{
text-align: center;
margin-top: 105px;
background: red;
position: relative;
float: left;
width: 100%;
height: 100%;
}
#left {
height: 100%;
width: 150px;
text-align:center;
background:#EAEAEA;
margin-top: 105px;
margin-left: -100%;
overflow: scroll;
position: relative;
float: left;
}
#right {
position: relative;
height: 100%;
width: 150px;
margin-right: -100%;
margin-top: 105px;
background: blue;
text-align: center;
float: left;
}
#footer {
text-align:center;
background: #5D7B93;
height:25px;
padding:5px;
position: fixed;
bottom: 0;
width: 100%;
}
No need to float. Just position: absolute the sidebars and give the center div fixed margin on both sides.
JSFiddle
CSS
#container{
position: relative;
}
#left, #right {
width: 200px;
height: 100%;
position: absolute;
top: 0;
}
#left {
left: 0;
}
#right {
right: 0;
}
#center {
margin: 0 200px;
}
i've done this on my layout and it works fine for me
body,
html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#container{
display: inline-flex;
width: 100%;
height: 100%;
background: lightblue;
}
#left {
width: 240px!important;
min-width: 240px!important;
background: red;
height: 100%;
}
#right {
width: 400px!important;
min-width: 400px!important;
background: red;
height: 100%;
}
#center {
background: blue;
width: 100%;
min-width: 600px;
height: 100%;
}