<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.parent {
height: 100vh;
overflow: auto;
}
.first {
height: 100vh;
}
.second {
height: 100vh;
}
</style>
</head>
<body>
<div class="parent">
<div class="first">
<h1>haha</h1>
</div>
<div class="second">
<h1>haha</h1>
</div>
</div>
</body>
</html>
demo: http://codepen.io/anon/pen/zxKmyq
this code will give two scrollbars on the left.
However, if we change the code to
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
* { <!-- this is the only modification I made compared to the first code -->
margin:0;
padding:0;
}
.parent {
height: 100vh;
overflow: auto;
}
.first {
height: 100vh;
}
.second {
height: 100vh;
}
</style>
</head>
<body>
<div class="parent">
<div class="first">
<h1>haha</h1>
</div>
<div class="second">
<h1>haha</h1>
</div>
</div>
</body>
</html>
demo: http://codepen.io/anon/pen/gbwBQK
Then there will be only one scrollbar, which is desirable.
But I don't know how this works, i.e. why this simple modification will change the scrollbar.
It's because most, if not all, browsers have a default margin of 8px on the body element.
When this default margin is present, the height of the browser is no longer 100%. Thus, a scrollbar is present.
More specifically, you are giving the .parent element a height of 100% of the browser. In addition to the 8px (top + bottom) margins, there is an excess of space.
100% + 16px != 100%.
In your second example, usage of
* {
margin: 0;
padding: 0;
}
..effectively removes this default margin.
You could merely use
body {
margin: 0;
}
..for the same results.
Related
I have a very simple problem: I want to have multiple <section>s inside a <main> tag. Each of the sections should contain a child <div> that is sticky so it is bound by the height of the section.
Now I have the problem that the <main> needs overflow-x: hidden to remove unwanted horizontal scrollbars (especially on Safari) but at the same time this line seems to disable the sticky elements. Any ideas how to solve this without JS?
This demo shows the problem. Uncomment the overflow to see the difference.
<!DOCTYPE html>
<html>
<head>
<style>
main {
width: 100%;
height: auto;
min-height: 100vh;
/*overflow-x: hidden;*/
position: relative;
display: block;
}
section {
width: 100%;
min-height: 100vh;
background: green;
}
div {
position: sticky;
top: 0;
}
</style>
</head>
<body>
<main>
<section>
<div>
<p>Content goes here</p>
</div>
</section>
<section>
<div>
<p>Second content goes here</p>
</div>
</section>
</main>
</body>
</html>
Position sticky normally doesn't work if parent element have overflow hidden property.
Instead of main try to give "overflow-x: hidden" to the body
body
{
overflow-x: hidden;
}
You may try below code,
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
padding: 0;
box-sizing: border-box;
overflow-x: hidden;
}
main {
width: 100%;
height: auto;
min-height: 100vh;
/*overflow-x: hidden;*/
position: relative;
display: block;
}
section {
width: 100%;
min-height: 100vh;
background: green;
}
div {
position: sticky;
top: 0;
}
</style>
</head>
<body>
<main>
<section>
<div>
<p>Content goes here</p>
</div>
</section>
<section>
<div>
<p>Second content goes here</p>
</div>
</section>
</main>
</body>
</html>
Note: Also you may use overflow: auto; instead of overflow-x: hidden; for this particular task only.
For your reference please visit below link: https://www.w3schools.com/css/css_overflow.asp
My code
.bid-toolbar {
background:#FFCD2F !important;
height:70px !important;
position: fixed;
bottom: 0;
I want to make the yellow toolbar stick to the bottom. I have tried a few times to make this toolbar to the bottom, but whenever I make it
fixed
, it goes up as I scroll the page down as you can see in the image below.
Using position: fixed often causes problems in mobile browsers. You can use display:flex in combination with overflow:auto to get a fixed footer without using fixed postioning:
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
html, body {
height: 100%;
margin: 0pt;
}
.Frame {
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
}
.Row {
flex: 0 0 auto;
}
.Row.Expand {
overflow: auto;
flex: 1 1 auto;
}
</style>
</head>
<body>
<div class="Frame">
<div class="Row Expand"><h2>Awesome content</h2></div>
<div class="Row"><h3>Sticky footer</h3></div>
</div>
</body>
</html>
A working example: https://jsfiddle.net/9L2reymy/2/
This is the original answer, which hides the footer if the content is bigger than the screen height:
I wrote an article in my blog about fixed footers and implemented them with display:table instead. Here is the relevant code in a simple example:
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
html, body {
height: 100%;
margin: 0pt;
}
.Frame {
display: table;
height: 100%;
width: 100%;
}
.Row {
display: table-row;
height: 1px;
}
.Row.Expand {
height: auto;
}
</style>
</head>
<body>
<div class="Frame">
<div class="Row Expand"><h2>Awesome content</h2></div>
<div class="Row"><h3>Sticky footer</h3></div>
</div>
</body>
</html>
Instead of position:fixed make it absolute property of position like
position:absolute;
position:absoulute; left:0px; bottom:0px; z-index:999;
You can try adding:
-webkit-transform: translateZ(0);
Or this was actually just the device/browser issues.
You can use jQuery to keep the bid toolbar bottom try the this code and note I used an ID #bid_toolBar you can change it to class if you want to.
$(document).ready( function() {
var bid_toolBarHeight = 0,
bid_toolBarTop = 0,
$bid_toolBar = $("#bid_toolBar");
positionbid_toolBar();
function positionbid_toolBar() {
bid_toolBarHeight = $bid_toolBar.height();
bid_toolBarTop = ($(window).scrollTop()+$(window).height()-bid_toolBarHeight)+"px";
if ( ($(document.body).height()+bid_toolBarHeight) < $(window).height()) {
$bid_toolBar.css({
position: "absolute"
}).animate({
top: bid_toolBarTop
})
} else {
$bid_toolBar.css({
position: "static"
})
}
}
$(window)
.scroll(positionbid_toolBar)
.resize(positionbid_toolBar)
});
I'm using the sticky footer from here: http://ryanfait.com/sticky-footer/
The CSS looks like this:
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}
.footer, .push {
height: 4em;
}
And the HTML like this:
<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>
If I add another div within the wrapper is it possible to somehow set its height to fill the wrapper? Thanks!
Just add height: 100%; to the div you want to add to your wrapper
I'd like to make a page container div have a top margin of 10% and bottom margin of 10%. How can I make the div take the remaining 80% of the page, all the time ( no matter if it has content or not )?
This should work:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div {
position: absolute;
height: 80%;
width: 80%;
top: 10%;
left: 10%;
background-color: #FFCC00;
}
</style>
</head>
<body>
<div>
This should prove my point.
</div>
</body>
</html>
You can try:
CSS
---
.container {
margin-top:10%;
margin-bottom:10%;
height:80%;
}
<div class="container"></div>
i have been trying to implement a bottombar for my site, however the vision i have seems to me to be rather difficult. Maybe you can enlighten me?
I want to have a bottombar that sits at the bottom of the browser window if the content does not spill over the edge, but if the content does spill over i want the bottombar at the bottom of the content.
I would prefer if it was CSS solution but it might be better/easier in something else, i dont know. Also no PHP.
I hope you understand me.
And thanks in advance for any answers.
Have you looked at http://www.cssstickyfooter.com/
Assuming the height of the bottom bar is fixed it's fairly simple. eg.:
<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<style type="text/css">
html, body { height: 100%; margin: 0; padding: 0; }
#content { min-height: 100%; }
* html #content { height: 100%; } /* IE6 hack */
#trailer { height: 2em; margin-top: -2em; background: yellow; }
#pad { height: 2em; }
</style>
</head><body>
<div id="content">
Content content content content content content content content content content content.
<div id="pad"></div>
</div>
<div id="trailer">
Bit at the bottom.
</div>
</body></html>
Something like this will do the trick, (note that the extra wrapping div with some padding-bottom is required in order to make sure the footer does not overlap the contents),
<html>
<head>
<title>Sticky Footer Test</title>
<style>
html, body {
height: 100%;
padding: 0px;
margin: 0px;
}
* {
margin: 0px;
}
#container {
min-height: 100%;
height: auto !important;
height/**/: 100%; /* for IE6 */
background: #ddd;
}
#footer {
position: relative;
background: #555;
margin-top: -100px;
height: 100px;
}
#content {
padding-bottom: 100px;
}
</style>
</head>
<body>
<div id="container">
<div id="content">
<p>Hello! I'm some content!</p>
</div>
</div>
<div id="footer">
<p>Hello! I'm a footer!</p>
</div>
</body>
</html>