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/
Related
Basically I'm trying to make a topbar with information on it, I was just about to change my stuff to a list till I noticed "The pink bar" going over the discord icon, how do I go about fixing this problem; the position is set to absolute.
* {
margin: 0;
}
body {
background: #a89ed2
}
.TopBar {
overflow: hidden;
position: relative;
background: #483467;
box-sizing: border-box;
}
#bottom {
position: absolute;
background: #ea5773;
width: 100%;
height: 10%;
left: 0;
top: 90%;
}
#media {
position: absolute;
display: inline-block;
left: 0%;
top: 0%;
}
#media img {
width: 15%;
height: 10%;
}
.wrapper1 {
padding: 2%
}
<body>
<div class=TopBar>
<div class=wrapper1>
<div id=bottom></div>
<div id=media>
<img src="https://cdn1.iconfinder.com/data/icons/logos-and-brands-3/512/91_Discord_logo_logos-512.png">
</div>
</div>
</div>
<div class=content></div>
</body>
Use id or class with double quotes(" classname | id ")
<!doctype HTML>
<html>
<body>
<div class="TopBar">
<div class="wrapper1">
<div id="bottom"></div>
<div id="media">
<img src="https://cdn1.iconfinder.com/data/icons/logos-and-brands-3/512/91_Discord_logo_logos-512.png">
</div>
</div>
</div>
<div class="content"></div>
</body>
</html>
Add a specific height to topbar and remove overflow:hidden
.TopBar {
height: 85px;
}
* {
margin: 0;
}
body {
background: #a89ed2
}
.TopBar {
overflow: hidden;
position: relative;
background: #483467;
box-sizing: border-box;
}
#media {
width: 100px;
height: 100px;
}
#media img {
max-width: 100%;
position: relative;
height: auto;
}
#media::before{
background: #ea5773;
width: 100%;
height: 10px;
position: absolute;
content: '';
bottom: 0;
left: 0;
right: 0;
}
.wrapper1 {
padding-bottom: 10px;
}
<body>
<div class="TopBar">
<div class="wrapper1">
<div id="media">
<img src="https://cdn1.iconfinder.com/data/icons/logos-and-brands-3/512/91_Discord_logo_logos-512.png">
</div>
</div>
</div>
<div class="content"></div>
</body>
I want to create two divs, one under other without JS and with IE8 support.
Each has 100% width.
Each with relative or absolute positioning for nested layout.
Top div have height by content, not fixed (it is important) and bottom div on whole leftover space.
In my example bottom div is too short, how i can stretch it to bottom?
<html>
<head>
<style type="text/css"><!--
* {
padding: 1px;
margin: 0px;
border: solid 1px;
width: 100%;
}
#super {
position: absolute;
height: 100%;
}
#top {
position: relative;
}
#bottom {
position: relative;
top: 0px;
bottom: 0px;
}
--></style>
</head>
<body>
<div id="super">
<div id="top">top</div>
<div id="bottom">bottom</div>
</div>
</body>
</html>
You can use css table properties to create this layout.
HTML:
<div id="super">
<div id="top">
<div class="content">
top
</div>
</div>
<div id="bottom">
<div class="content">
bottom
</div>
</div>
</div>
Necessary CSS:
html,
body {
height: 100%;
}
#super {
height: 100%;
width: 100%;
display: table;
}
#super > div {
display: table-row;
}
#top {
background: green;
}
#bottom {
background: blue;
}
html,
body {
height: 100%;
padding: 0;
margin: 0;
}
#super {
height: 100%;
width: 100%;
display: table;
}
#top {
background: green;
overflow: hidden;
height: 1%;
}
.content {
padding: 10px;
}
#bottom {
background: blue;
}
#super > div {
display: table-row;
}
<div id="super">
<div id="top">
<div class="content">
top
</div>
</div>
<div id="bottom">
<div class="content">
bottom</div>
</div>
</div>
Output Image:
You can use display: table for wrapping container and table-row for top and bottom divs:
* {
padding: 1px;
margin: 0px;
border: solid 1px;
width: 100%;
}
#super {
display: table;
position: absolute;
height: 100vh;
}
#top {
display: table-row;
height: 1px;
position: relative;
background: orange;
}
#bottom {
display: table-row;
position: relative;
top: 0px;
bottom: 0px;
background: teal;
}
<div id="super">
<div id="top">top<br>top text</div>
<div id="bottom">bottom</div>
</div>
Use flex-box
.parent{
display: flex;
flex-direction: column;
min-height: 100vh
}
.child2{
flex: 1;
background: blue;
}
<div class="parent">
<div class="child1"> first child</div>
<div class="child2"> second child</div>
</div>
Demo here
Try this :
#bottom {
position: relative;
top: 0px;
bottom: 0px;
HEIGHT: 800px;
}
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; }
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