My main content div does not fit the height of my wrapper.
I have the html, body and wrapper set to a height of 100%.
I also have the height of my main content to 100% however it seems to add more to the bottom of the wrapper causing it to sit outside of the body!
The CSS:
html,body {
margin:0;
font-family:asap!important;
background-color:#FFD400!important;
height:100%;
min-height:100%;
}
#wrapper {
width:100%;
min-height:100%;
position:relative;
height:auto;
overflow-x:hidden
}
.contentwrap {
background:lightblue;
position:relative;
padding-top:50px;
height: 100%;
}
The HTML:
<div id="wrapper">
<div class="headerwrap">
<div id="logo">
<img src=#">
</div>
<div class="headercontact">
<img src="#">
</div>
</div>
<div id="nav">
<ul>
<li>Home</li>
<li>
Manage My Website
<ul class="sub-menu">
<li>Make Website Changes</li>
<li>Renew My Website Package</li>
</ul>
</li>
<li>Clothing</li>
<li>My Details</li>
<li>Help Center</li>
</ul>
</div>
<div class="contentwrap">
<div class="row clearfix">
<div class="col-md-6 column">
<div class="textcontainer">
<p class="maintext">Hello Alicia,</p>
<p class="maintext smalltext whitetext">Welcome to Your Account!</p>
</div>
</div>
<div class="col-md-6 column">
<div class="circle circle-solid">
<div class="circle-inner">
<div class="score-text">
home page marketing
</div>
</div>
</div>
</div>
</div>
</div>
<div class="folk">
<img src="/Images/ST-Folk-Dec.png">
</div>
</div>
Any Ideas?
Use for height 100% position:absoulte style
<div style="border:1px red solid; height:100%; position:absolute; width:100%">
Height 100% width 100%
</div>
100% on the html/body means 100% of your screen. So actually your body has a static height which is equal to your screen height.
Get rid of the height:100% on both your html and your body
change
html,body {
margin:0;
font-family:asap!important;
background-color:#FFD400!important;
height:100%;
min-height:100%;
}
to
html,body {
margin:0;
font-family:asap!important;
background-color:#FFD400!important;
height:100vh;
min-height:100vh;
}
After pulling my code apart i found a solution and thought i would post in case someone else has this issue!
As I had two divs within my wrapper, the header div and content div, i needed to account for both of their heights within the wrapper.
If you see my code above i moved the navigation into the headerwrap and set a height of 23%, i then set a height of 77% on the content wrapper.
You may want to add a min-height to both to stop any content being cut on smaller screens.
Related
<div style="border-style:solid; margin:auto;">
<div style="position:absolute;">
<div style="background:yellow; border-style:dotted; height:300px; width:300px">
<h3>THIS IS THE BODY, AND HEIGHT WILL BE CHANGED DYNAMICALLY</h1>
</div>
</div>
<img src="https://www.google.ca/logos/doodles/2016/lunar-new-year-2016-5134827118395392-hp.jpg">
</div>
<div style="border-style:solid">
<h2> THIS IS THE FOOTER</h1>
</div>
I'm trying to put a div over the image, how let the floating div to occupy the space, so the footer div will be pushed accordingly.
I'm not sure what you're asking. Do you wish to have the yellow div take up only the amount of space of the div behind it (with the Google Doodle)? Or do you want the reverse, that is, you want the footer height to automatically adjust to the yellow div height?
I am not sure I completely understand. Do you mean to make the div containing the image to have a minimum height? You can use the min-height property then as follows:
<div style="border-style:solid; margin:auto;min-height:80%">
<div style="position:absolute;">
<div style="background:yellow; border-style:dotted; height:300px; width:300px">
<h3>THIS IS THE BODY, AND HEIGHT WILL BE CHANGED DYNAMICALLY</h1>
</div>
</div>
<img src="https://www.google.ca/logos/doodles/2016/lunar-new-year-2016-5134827118395392-hp.jpg">
</div>
<div style="border-style:solid">
<h2> THIS IS THE FOOTER</h1>
</div>
-- Edit: If you are looking for some kind of a background-image in a div container you can control you can do something like this:
<html>
<head>
</head>
<body>
<div style="border-style:solid; margin:auto">
<div div style="background-image:url('https://www.google.ca/logos/doodles/2016/lunar-new-year-2016-5134827118395392-hp.jpg'); background-repeat: no-repeat;" >
<div style="border-style:dotted; height:400px; width:600px">
</div>
</div>
</div>
<div style="border-style:solid">
<h2> THIS IS THE FOOTER</h1>
</div>
</body>
</html>
I have a table with height 100% and three rows, the first and last ones have a fixed height, and the one in the middle has no specific height so it stretches to the necessary height.
The problem is that if you fill that row with too many items, the table will be too big and it will exceeds the 100%.
<div id="wrapper">
<div id="first" class="row">
<div>
first
</div>
</div>
<div id="second" class="row">
<div>
<div style="height:50px">
cont0
</div>
<div style="height:50px">
cont1
</div>
<div style="height:50px">
cont2
</div>
<div style="height:50px">
cont3
</div>
<div style="height:50px">
cont4
</div>
<div style="height:50px">
cont5
</div>
</div>
</div>
<div id="first" class="row">
<div>
last
</div>
</div>
html, body {height:100%; margin:0; padding:0;}
#wrapper{
width:300px;
height:100%;
display:table;
}
.row
{
display:table-row;
}
#first
{
height:50px;
margin-bottom:5px;
background-color:#F5DEB3;
}
#second{
background-color:#9ACD32;
}
#second > div{
height:100%;
border: 1px solid red;
overflow-y: auto;
}
It's difficult to explain, but this fiddle demonstrates it: http://jsfiddle.net/3EjX8/127/
Resize the table with your mouse in chrome and it will behave nice (scrollbar appears inside the table).
But resize it in firefox and it will have this unexpected behavior.
Maybe I'm wrong and I'm taking good part of a chrome's bug.
I'm just wondering if there is a possibility to make this behave in firefox as it does on chrome.
Thanks.
I made it work on both firefox, chrome.
Don't use display: table for this, not necessary
You had the id "first" two times.
You don't need divs inside divs
Use 'calc' it's a life saver.
http://jsfiddle.net/foreyez/p3rcyofk/
<div id="wrapper">
<div id="first" class="row">
first
</div>
<div id="second" class="row">
<div>
<div style="height:50px">
cont0
</div>
<div style="height:50px">
cont1
</div>
<div style="height:50px">
cont2
</div>
<div style="height:50px">
cont3
</div>
<div style="height:50px">
cont4
</div>
<div style="height:50px">
cont5
</div>
</div>
</div>
<div id="last" class="row">
last
</div>
</div>
html, body {height:100%; margin:0; padding:0;}
#wrapper
{
width:300px;
height:100%;
}
#first,#last
{
height:50px;
background-color:#F5DEB3;
}
#second{
background-color:#9ACD32;
}
#second {
height:calc(100% - 100px);
border: 1px solid red;
overflow-y: auto;
}
I am using an absolute div so I can overlap one div from another. The div that overlaps is the absolute one (.content). However, if the overlapped div (.left) doesn't fit the screen, a horizontal scroll bar doesn't appear of course. How can I make the horizontal scroll bar automatically appear if its contents doesn't fit the given width? Here is the css:
.left {
width: 70%;
height:100%;
float:left;
overflow-x:auto;
}
.content {
position: absolute;
width: 70%;
height: 100%;
margin-top: 0px;
margin-bottom: 0px;
margin-right: 0px;
margin-left: 130px;
background-color: #2b3e50;
border-left-width:5px;
border-left-style:solid;
border-left-color:#153450;
padding-left: 20px;
}
Please help me figure this out.
EDIT
Here is the div structure:
<div class="topbar">
<div class="fill">
<div class="container">
Home
<ul class="nav">
<li> One </li>
<li> Two </li>
<li> Three </li>
<li> Four </li>
</ul>
<p align="right">Log-out </p>
</div>
</div>
</div>
<div id="loader" class="left" style="border-right-width:15px;">
</div>
<div class="container">
<div class="content">
<div class="row">
<div class="span14">
#content
</div>
</div>
</div>
</div>
<script>
$("#loader").html('<object data="#routes.Tags.map(false)" />');
</script>
EDIT
I surrounded the left div with a parent div.
<div class="parent">
<div id="loader" class="left" style="border-right-width:15px;">
</div>
</div>
<div class="container">
<div class="content">
<div class="row">
<div class="span14">
#content
</div>
</div>
</div>
</div>
With the following css for parent.
.parent {
width: 100%;
position: relative;
}
But still doesn't show a scrollbar.
In your html left is not child of content you can't make it scroll.
If you have parent > child then just use position: relative on parent block.
Here is example http://jsfiddle.net/4swN9/
In the code below, B1 contains an image and B2 includes an iframe.
The height of B and container is equal to the height of B1, but B2 is overflowing the container, which I don't want. How do I fix this?
<div id="container">
</div>
<div id="B">
<div id="B1">
<img src="example.jpg" />
</div>
<div id="B2">
<iframe src="example.htm">
Your browser doesn't support iframes.
</iframe>
</div>
</div>
</div>
give container value display:inline-block
and B2, overflow:auto
That should help!!
EDIT
Assuming you container is closed incorrectly, this should be your html markup :
<div id="container">
<div id="B">
<div id="B1">
<img src="http://upload.wikimedia.org/wikipedia/commons/1/1b/Square_200x200.png" />
</div>
<div id="B2">
<iframe src=""></iframe>
</div>
</div>
</div>
and CSS
html, body {
width:100%;
height:100%;
margin:0;
padding:0;
}
#container {
width:100%;
height:100%;
}
#B {
width:100%;
height:100%;
}
#B1,#B2,iframe,img{
width:100%;
height:auto; /*to mainatin height as per requirement */
}
basic demo
I've a background image for body and a background color for wrapper div.
I haven't set any height for body and I'm using a min-height:1000px for wrapper.
But if wrapper height extends 1000px;, the background color of wrapper is as body background image.
HTML Code:
<body>
<div id="wrapper">
<div id="header">
<div id="headercontainer">
<div id="company"></div>
<div id="tagline"></div>
<div id="navigation"></div>
</div>
</div>
<div id="pagecontainer1"></div>
<div id="footer1"></div>
</div>
Here is the css:
body{
background:#E8EDF0;
margin:0;
width:100%;
background-image: url(http://l1.yimg.com/a/i/ww/met/th/slate/gsprite_pg_slate_20100521.png);
background-repeat: repeat-x;
background-position: 0px -2335px;}
#wrapper{
background-color:#FFF;
min-height:1000px;
width:1008px;
margin:auto;
position:relative;
overflow:visible;
}
How can i fix this background color issue for wrapper.
As the way you coded your page, you can't get the wrapper to cover the full height. So the best way to do it is to make a background image for your full body like this:
grey area##-----white area: 1008px-----###grey area
make it 2000px wide (or more), 1px high, and repeat vertically:
background:#E8EDF0 url(new-background-path.jpg) top center repeat-y;
simply add <div style="clear:both"></div> in pagecontainer1 div. coz i think there are some float div so to clear float use float clear or you can use overflow:hidden; rather than overflow:visible;
<div id="wrapper">
<div id="header">
<div id="headercontainer">
<div id="company"></div>
<div id="tagline"></div>
<div id="navigation"></div>
</div>
</div>
<div id="pagecontainer1">
<div style="clear:both"></div>
</div>
<div id="footer1"></div>
<div style="clear:both"></div>
</div>