as I've understood, for a div to actually be 100% in height, the parent div needs to be set right?
So, imagine a div structure that looks like this:
<title>A CSS Sticky Footer</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
</head>
<body>
<div class="wrapper">
<div class="header">Header</div>
<div class="gallery">gallery</div>
<div class="push">This is inside the push</div>
</div>
<div class="footer">Footer</div>
</body>
This is supposed to essentially be a sticky footer layout based on Ryan Faiths sticky footer layout.
How can in this case the gallery have 100% height as well as the wrapper? I can't figure this out.
My CSS looks like this: Exactly the same as Ryan's CSS, only with the gallery class added.
* {
margin: 0;
}
html, body {
height: 100%;
}
.gallery {
background-color:blue;
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%
margin-left: auto;
margin-right: auto;
width:830px;
margin-bottom: -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
height: 142px;
margin-left: auto;
margin-right: auto;
width: 830px;
}
(Deleted all the old stuff)
Here is the new HTML with gallery 100%, hope it works :-)
<!DOCTYPE html PUBLIC "-//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>
<title>A CSS Sticky Footer</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<style type="text/css">
* {
margin: 0;
}
html, body {
height: 100%;
}
.header{background-color: green;position: fixed; top:0;width: 830px;height: 80px; z-index:1;}
.gallery {background-color:blue;height: 100%;}
.wrapper {
height: 100%;
margin: 0 auto;
width:830px;
}
.footer, .push {
height: 80px;
width: 830px;
background-color: #CCFF00;
position: fixed;
bottom:0;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="header">Header</div>
<div class="content gallery">gallery</div>
<div class="footer">Footer</div>
</div>
</body>
</html>
I don't know if this is technically an answer, but it's more of an answer than a comment so here goes:
Personally I don't like the Ryan Fait Sticky Footer approach, I much prefer the one used here: http://www.digital-web.com/extras/positioning_101/css_positioning_example.php. To me it's a much cleaner solution and makes more sense from a design and standards point of view. From my experience it works almost 100%, and degrades gracefully the rest of the time.
My 2cents...
Related
I am currently creating a web-page where popup boxes are opening with dynamic content.
The popup itself should be maximal 98% height of the window -> no content goes on small devices in the overflow.
The content can consist of different elements which are floating and their width is managed by bootstrap columns. Their height should be given by their content, but not exceed the height of the popup. These content boxes can float under each other depending on screensize.
Due to the fact that all content is dynamic and therefore the heights are unknown until all is rendered, there could be scrollbars in almost every box.
html,
body {
float: left;
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
font-family: "Roboto Condensed", sans-serif;
overflow-x: hidden;
}
.clearfix:after {
content: " ";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
* html .clearfix {
height: 1%;
} /* Hides from IE-mac \*/
.clearfix {
display: block;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="responsive.css">
<!-- Favicon -->
</head>
<body>
<div id="wrapper" style="height: 100%; width; 100%">
<!-- simple full size wrapper -->
<div id="dynamicPopup" style="max-height: 98%; background-color: yellow; overflow: auto;" class="clearfix">
<!-- dynamicPopup - its height depends of content, max height should not exceed 98% of window -->
<div id="popupContentWrapper" style="height: 100%; width: 100%"><!-- popupContentWrapper - keeping all popupContents together -->
<div id="leftContent" class="col-sm-12" style="background-color: red;">
<!-- leftContent - can be small, but max 100% of height -->FOO</br></br></br></br></br></br></br></br></br></br></br></div>
<div id="rightContent" class="col-sm-6" style="height: 100%; background-color: green; overflow: auto;">
<!-- rightContent - can be small, but max 100% of height, then scrollbar -->
<div id="rightInnerContent" style="width: 100%; height: 2000px; background-color: green;">BAR</div>
<!-- rightInnerContent -in this case a very long list which should be create a scrollbar in parent/rightContent -->
</div>
</div>
<div>
</div>
</body>
</html>
The example code is only working, when you add a specific height to #dynamicPopup (for ex. 400px).
Is there any way to solve this only with CSS and HTML?
your #wrapper must have position: fixed; so it's height is relative to window not the body. then #dynamicPopup gonna work the way you expect. this is how popups (modals) work.
here's a good example of what you're trying to achieve:
https://codepen.io/jzilg/pen/vEmQrm
and I have no idea why you have floated your html and body. I've never seen something like this before. try to avoid it.
html,
body {
margin: 0px;
padding: 0px;
font-family: "Roboto Condensed", sans-serif;
overflow-x: hidden;
}
#wrapper {
position:fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.clearfix:after {
content: " ";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
* html .clearfix {
height: 1%;
} /* Hides from IE-mac \*/
.clearfix {
display: block;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="responsive.css">
<!-- Favicon -->
</head>
<body>
<div id="wrapper" style="height: 100%; width; 100%">
<!-- simple full size wrapper -->
<div id="dynamicPopup" style="max-height: 98%; background-color: yellow; overflow: auto;" class="clearfix">
<!-- dynamicPopup - its height depends of content, max height should not exceed 98% of window -->
<div id="popupContentWrapper" style="height: 100%; width: 100%"><!-- popupContentWrapper - keeping all popupContents together -->
<div id="leftContent" class="col-sm-12" style="height: 49vh; overflow: auto; background-color: red;">
<!-- leftContent - can be small, but max 100% of height -->FOO</br></br></br></br></br></br></br></br></br></br></br></div>
<div id="rightContent" class="col-sm-6" style="height: 49vh; background-color: green; overflow: auto;">
<!-- rightContent - can be small, but max 100% of height, then scrollbar -->
<div id="rightInnerContent" style="width: 100%; height: 2000px; background-color: green;">BAR</div>
<!-- rightInnerContent -in this case a very long list which should be create a scrollbar in parent/rightContent -->
</div>
</div>
<div>
</div>
</body>
</html>
Hiw can I split my page into one top (50% height, width=100%) and two bottom columns(50% height, 50% width).
I tried but no success...
<html>
<head>
<title>CSS devide window into three (horizontal, 2 vertical )</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css" media="screen">
.wrapM {
width: 100%;
height: 100%x;
padding:2px;
}
.wrapT {
width: 100%;
height: 50%;
padding:2px;
}
.wrapB {
width: 100%;
height: 50%;
padding:2px;
}
.wrapl {
width: 50%;
height: 100%;
padding:2px;
}
.wrapr {
width: 50%;
height: 100%;
padding:2px;
}
</style>
</head>
<body>
<div class="wrapM">
<div class="wrapT">Hello World This is upper Content</div>
</div>
<div class="wrapB">
<div class="wrapl">Hello World This is bottom LEFT Content</div>
<div class="wrapr">Hello World This is bottom right Content</div>
</div>
</body>
</html>
To get .wrapB1 and .wrapB2 side by side, they should float: left. But this is not sufficient, because of the padding. Add box-sizing: border-box to have this fixed.
To get a height of 50%, html and body should be set to 100% height. Additionally, you have a syntax error in your height specification of .wrap.
Have a look at https://jsfiddle.net/sgtb00nt/ to see a working version. I have also fixed the wrong nesting of <div>s.
My goal is to have a footer that stays at the bottom of the page if there is little content, and moves to the bottom of all content if the page has a lot of content (requiring a scroll down).
I read this post Flushing footer to bottom of the page, twitter bootstrap , tried the layout and css, but still can't seem to get my page to work correctly.
This is my code layout - maybe I just made a slight mistake?
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
// Header Stuff
</div>
<div class="container">
<div class="jumbotron">
// h2
</div> // end jumbotron
<div class="row">
//ALL OF THE INFORMATIONAL CONTENT
</div> //end row
</div> //end container
<footer class="footer">
//INFORMATION / LINKS
</footer> //end footer
</body>
and with the name changes to the CSS code...
html, body {
height: 100%;
}
.container {
min-height: 100%;
}
.row {
overflow:auto;
padding-bottom:150px; /* this needs to be bigger than footer height*/
}
.footer {
position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;
padding-top:20px;
}
I think, css flexbox can help you in this. But, just beware of browser support.
HTML:
<body class="Site">
<header>...</header>
<main class="Site-content">...</main>
<footer>...</footer>
</body>
CSS:
.Site {
display: flex;
min-height: 100vh;
flex-direction: column;
}
.Site-content {
flex: 1;
}
demo: http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/
Click on Toggle Content Button right there to see the difference.
try this one...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}
.footer, .push {
height: 4em;
}
</style>
</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>
My html page is:
<html>
<head>
<title>Hello there</title>
<link href="style.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="content">
Hello world
</div>
</body>
</html>
My css file is:
html, body{
width: 100%;
height: 100%;
}
div#content{
width: 80%;
display: block;
margin: 0 auto;
height: 90%;
border: 1px solid red;
}
But the content div is not centered properly.
I am using IE7 to view this page.
You should add a <!doctype> to the beginning of your document, also remove the display: block; from your div selector, a div is by default a block level element so this declaration has no meaning. (this won't break the layout, it just makes no sense to tell an already block level element to be block again.)
Other than that, your CSS is perfectly fine :)
HTML:
<!doctype html>
<html>
<head>
<title>Hello there</title>
<link href="style.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="content">
Hello world
</div>
</body>
</html>
CSS:
html, body{
width: 100%;
height: 100%;
}
div#content{
width: 80%;
margin: 0 auto;
height: 90%;
border: 1px solid red;
}
http://jsfiddle.net/u5w8F/
For IE 7 quirksmode (and IE 6) you can add
html, body{
text-align: center;
}
div#content{
text-align: left;
}
to center the div... (old skool)
Is there a way to instruct a div to fill 100% of the available page height, until it gets enough content to require a scrollbar?:
// browser height: 600px:
<div>
// empty, so just be 600px tall.
</div>
....
// when it gets content and gets taller than
// the page, don't need to auto-height itself
// anymore.
<div>
<ul>
<li></li>
<li></li>
...
</ul>
</div>
is there any sort of style that can make that happen, or does this need to be done with javascript?
Thanks
Have a look at min-height. Not supported in older versions of IE, but should do what you want.
http://www.w3schools.com/CSS/pr_dim_min-height.asp
This is hands down the easiest way to do what you're looking for:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Demo</title>
<style type="text/css" media="screen">
#content { position: absolute; top: 0; bottom: 0; right: 0; left: 0; overflow: auto; }
</style>
</head>
<body>
<div id="content">
<p>Embed all your content here.</p>
</div>
</body>
</html>
Alternatively if you want to support older browsers you could do this instead:
#content { position: absolute; top: 0; left: 0; height: 100%; overflow: auto; width: 100%; }
<!doctype html>
<html>
<head>
<style>
* {
margin:0;
padding:0;
}
html, body {
height:100%;
}
div#page {
background:#333;
min-height:100%;
text-align:center;
}
</style>
</head>
<body>
<div id="page"></div>
</body>
</html>
Feed height:100% to IE6 if you care about it in a conditional.
in your CSS, do you have
html, body set to {height: 100%}