I have a page with height 100%:
<div id="wrapper">
<header id="header" class="clearfix">
</header>
<div class="main-container clearfix">
<aside id="sideLeft">
</aside><!-- #sideLeft -->
<div id="content">
<div id="map_canvas"></div>
</div>
</div> <!-- #main-container -->
</div><!-- #wrapper -->
CSS:
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
min-height: 100%;
}
#wrapper {
width: 100%;
height: 100%;
}
#header {
width: 100%;
height: 45px;
}
.main-container {
width: 100%;
height: 100%;
min-height: 100%;
}
#content {
height: 100%;
margin-left: 20%;
}
#map_canvas {
height: 100%;
width: 100%;
}
#sideLeft {
height: 100%;
width: 20%;
float: left;
}
But I want to make content 100% - height of header (in px), to don't show scrolling on the page.
I try to add position: absolute; to #header and .main-container but it's not helping (scroll still showing).
Live example: http://indoor.powerhtml.ru/30/index.html
CSS cannot perform calculations and manipulation on page, it is just a stylesheet. You have to use JS for this.
jQuery snippet to do what you want is
$("#header").height($("#header").height()); //This automatically converts % to px
Check it out
Related
My goal was to get the footer to stay at the bottom of the page and to go further down when more content is added. In doing so, a div element on my page which follows the footer has stopped half way when there isn't enough content.
My question is, how do you get the middle-stripdiv to stretch to the footer and have the goal above still achievable.
Here is a simplified JSFiddle to show the issue.
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
#container {
min-height: 100%;
position: relative;
}
#header {
background: #283343;
height: 50px;
}
#middle-strip {
padding-bottom: 100px;
background: #32cd32;
width: 500px;
margin: auto;
}
#content-area {
width: 400px;
height: 100%;
margin: auto;
}
#footer {
background: #283343;
position: absolute;
bottom: 0;
width: 100%;
height: 100px;
}
<div id="container">
<div id="header">
THIS IS THE HEADER
</div>
<div id="middle-strip">
<div id="content-area">
THIS IS WHERE THE CONTENT WILL GO
</div>
</div>
<div id="footer">
THIS IS THE FOOTER
</div>
</div>
You can use flexbox to achieve this:
#container {
display: flex;
min-height: 100vh;
flex-direction: column;
}
#middle-strip {
flex: 1;
}
https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/
I'm having a problem with two wrappers that I am using. I want to make the #wrapper always extend to the bottom of the screen. This is now working by using min-height: 100%;. Within this div I'm using another wrapper, #page-wrapper, which should be extended to the bottom of the #wrapper div. To make this work, the #wrapper div has to be set to height: 100% instead of min-height. Is there a way to achieve both?
#wrapper {
width: 100%;
background-color: #2f4050;
min-height: 100%;
position: relative;
}
#page-wrapper {
padding: 0 15px;
min-height: 100%;
background-color: white;
height: 100%;
}
<div id="wrapper">
<div id="page-wrapper"></div>
</div>
Try using viewport units.
#page-wrapper {
min-height: 100vh;
}
Example 1:
body {
margin: 0;
}
#wrapper {
background: pink;
}
#page-wrapper {
min-height: 100vh;
background: gold;
}
<div id="wrapper">
<div id="page-wrapper">
</div>
</div>
Example 2:
body {
margin: 0;
}
#wrapper {
background: pink;
}
#page-wrapper {
min-height: 100vh;
background: gold;
}
<div id="wrapper">
<div id="page-wrapper">
<div style="height:200vh;"></div>
</div>
</div>
I have a website with the following structure:
<html>
<body>
<div id="page">
<div id="anyContent"></div>
<div id="pagecontent">
<div id="bigContent"></div>
<div id="footer"></div>
</div>
</div>
</body>
</html>
bigContent is dynamic and often stretches to large sizes (demonstrated by its width and height). Because a lot of elements are dynamically rendered into the div, bigContent isn't set to a static width.
How can I force the footer to have the same width as bigContent?
See my example jsFiddle.
html {
margin: 0;
padding: 0;
height: 100%;
min-width: 100%;
}
#page {
min-height: 100%;
min-width: 100%;
position: relative;
}
#bigContent {
background: black;
height: 3000px;
width: 5000px;
}
#footer {
background: blue;
clear: left;
bottom: 0px;
width: 100%;
height: 100px;
}
You can set some properties to #pagecontent then it will work as per your need:
html {
margin: 0;
padding: 0;
height: 100%;
min-width: 100%;
}
#pagecontent {
float: left;
position: relative;
}
#pagecontainer {
min-height: 100%;
min-width: 100%;
position: relative;
}
#bigContent {
background: black;
}
#footer {
background: blue;
height: 25px;
width: 100%;
}
<div id="pagecontainer">
<div id="anyContent"> </div>
<div id="pagecontent">
<div id="bigContent" style="width:500px; height:150px;"></div>
<div id="footer"></div>
</div>
</div>
You have set the width: 5000px and height to 3000px.
<div id="bigContent" style="width:5000px; height:3000px;"></div>
Try this
<div id="bigContent"></div>
and add
#bigContent {
background: yellow;
height: 1000px;
width: 100%;
}
FIDDLE
You set width to #bigContent, better would be to set this width to #pagecontent.
<div id="pagecontainer">
<div id="anyContent"></div>
<div id="pagecontent" style="width:5000px;">
<div id="bigContent" style="height:3000px;"></div>
<div id="footer"></div>
</div>
</div>
http://jsfiddle.net/47hb3fcn/3/
I want to make .side-menu element's position fixed, but I have no success with the code below. .side-menu element moves with .child-container content.
Why it doesn't work and how to make it work? :)
HTML:
<div class="pageWrapper">
<div class="container">
<div class="side-menu">
Menu content
</div>
<div class="child-container">
Large Content
</div>
</div>
</div>
CSS:
body, html {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.pageWrapper {
overflow-x: hidden;
min-width: 1200px;
height: 100%;
}
.container {
position: relative;
width: 1170px;
margin: 0 auto;
height: 100%;
}
.side-menu {
position: fixed;
width: 80px;
height: 300px;
}
.child-container {
position: relative;
margin: 40px auto 0 auto;
width: 900px;
}
I have updated the code with the html of the question:
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style type="text/css">
*
{
margin: 0;
}
.container
{
position: static;
padding: 0px;
width: 1200px;
margin: 0 auto 0 auto;
}
.side-menu
{
position: fixed;
background: red;
width: 200px;
}
.child-container
{
background: orange;
float: left;
width: 1000px;
margin-left: 200px;
}
</style>
<body>
<div class="pageWrapper">
<div class="container">
<div class="side-menu">
Menu content
</div>
<div class="child-container">
Large Content
</div>
</div>
</div>
</body>
</html>
I am encountering some problems with div.images when trying to set {height: 100%; }: computed height does not equal the parent div#placeholder's height, but the grandparent div#home-screen's.
<!DOCTYPE html>
<html>
<body>
<div id="page-wrapper">
<div id="home-screen">
<header>
<div></div>
</header>
<div id="placeholder">
<div class="images"></div>
<div class="images"></div>
<div class="images"></div>
<div class="images"></div>
</div>
<div id="cross-screen-content">
<div></div>
</div>
</div>
<main role="main">
<p>This is a test page. </p>
</main>
<footer>
<div></div>
</footer>
</div>
</body>
</html>
Page style is as follows:
* {
margin: 0;
border: 0;
padding: 0; }
html, body {
height: 100%; }
div#page-wrapper {
height: 100%; }
div#home-screen {
display: table;
margin-bottom: 25px;
width: 100%;
height: 100%; }
header,
div#placeholder,
div#cross-screen-content {
display: table-row; }
header {
height: 85px;
background-color: #f00; }
div#placeholder {
height: 100%;
background-color: #0f0; }
div#placeholder div.images {
position: absolute;
left: 5%;
margin: 5px 0;
width: 90%;
height: 100%;
min-height: 200px;
background-color: #ccc; }
div#cross-screen-content {
height: 50px;
background-color: #00f; }
footer {
height: 80px; }
Also, {min-height: 200px; } doesn't seem to work.
Any ideas?
Thank you in advance.
UPDATE 1: min-height does work, but it does not prevent the parent DIV from collapsing.
I edited the following id's - is this the effect you were after?
div#placeholder {
height: 100%;
background-color: #0f0;
}
div#placeholder div.images {
left: 5%;
margin: 5px 0;
width: 90%;
height: 100%;
min-height: 200px;
background-color: #ccc;
}
The code should be rewritten as:
<div id="placeholder">
<div id="wrapper">
<div class="images"></div>
<div class="images"></div>
<div class="images"></div>
</div>
</div>
The div#wrapper needs the following styles:
div#wrapper {
display: table-cell;
position: relative; }