I have the following problem.
I have done the following:
In my css file, I have declared both for body and for a div tag enclosed in body, height: 100%; (the div tag is technically a <asp:panel> tag, but get's rendered as a div tag.
This works fine, and the div container scale to fill the browser from top to bottom, and does not give any scrollbar, just as it is intended to.
However, on one of the sub-pages, from the Page_Load method I add some controls to the panel/div, and those controls are enough to fill more than the height of the screen, and therefore a vertical scrollbar is given as it should. However, when I start scrolling, the part of the content that was originally below the height of the screen do not get any background. So the background is still constrained to the max height of the screen even if it's contents are exceeding that height.
I assume that the height:100% causes the problem here, but I have not found a replacement that works as it should in this case. I tried height:auto; causing the background to be removed in it's entirety.
The question might be basic, but I do not do much web programming these days, so please bear with me :)
EDIT
As additional information, I should mention that the content is actually added inside a div inside the original div if that matters.
EDIT 2
Some of the relevant html and css:
<html>
<title></title>
<body>
<form>
<div class="MainContainer">
<h1>My header</h1>
<div class="MainMenu">
...
</div>
<div id="PageContents_BlogPostPanel" class="ContentContainer">
...(These are the contents that extend beyond the bottom of the page)!!
</div>
</div>
</form>
</body>
</html>
And here is the extracted css parts:
*
{
margin: 0;
padding: 0;
}
html, body
{
background-color: #6CC66C;
height: 100%;
}
form
{
background: #6CC66C url( 'images/ShadowBackground.jpg' ) repeat-y top center;
height: 100%;
}
body h1
{
display:none;
}
.DivHeader
{
font-family: Arial, Sans-Serif;
font-size: 22px;
color: #D04444;
padding-top:20px;
padding-bottom:10px;
}
p
{
font-family: Arial, Sans-Serif;
font-size: 16px;
}
a
{
font-family: Arial, Sans-Serif;
font-size: 16px;
text-decoration: none;
}
.MainContainer
{
background: #6CC66C url( 'images/MainBackground.jpg' ) no-repeat top center;
width: 1040px;
height: 100%;
margin: auto;
background-color: #F7F7F7;
}
div.MainMenu
{
position:relative;
float: right;
margin-right: 38px;
margin-top: 103px;
width: 495px;
}
.MainMenu a:link img, a:visited img { border: 0px; }
.ContentContainer
{
float: left;
margin-top:90px;
margin-left:80px;
width:550px;
}
I have a solution for this and it's rather simple. :)
.MainContainer {
...
display: table;
}
(Remove the height: 100% from elsewhere too, it's redundant.)
Some spec info on that: http://www.w3.org/TR/CSS2/tables.html also here: w3schools.com/css/pr_class_display.asp (Apparently I can only post two links a new user right now)
Regarding the use of Height: 100%, doing that will only make the elements height equal to the height of it's parent element - in this case the document window, not the contents of it.
Some spec info here: http://www.w3.org/TR/CSS21/syndata.html#percentage-units
Regards.
Try overflow tag in Css file
overflow:scroll;
overflow:auto;
I think what you need is something like this:
Style should be
*
{
margin: 0;
padding: 0;
}
body
{
font-family: Arial, Sans-Serif;
font-size: 16px;
}
form
{
background: #6CC66C url( 'images/ShadowBackground.jpg' ) repeat-y top center;
}
body h1
{
display:none;
}
.DivHeader
{
font-family: Arial, Sans-Serif;
font-size: 22px;
color: #D04444;
padding-top:20px;
padding-bottom:10px;
}
a
{
text-decoration: none;
}
.MainContainer
{
background: #F7F7F7 url( 'images/MainBackground.jpg' ) no-repeat top center;
width: 1040px;
margin: 0 auto;
min-height: 100%;
}
div.MainMenu
{
float: right;
margin-right: 38px;
padding-top: 103px;
width: 495px;
}
.MainMenu a:link img, a:visited img { border: 0px; }
.ContentContainer
{
float: left;
margin-top:90px;
margin-left:80px;
width:550px;
}
And you need an element to clear the floated divs in the MainContainer
<div class="MainContainer">
<h1>My header</h1>
<div class="MainMenu">
...
</div>
<div id="PageContents_BlogPostPanel" class="ContentContainer">
...(These are the contents that extend beyond the bottom of the page)!!
</div>
<div style="clear:both"></div>
</div>
Related
I'm trying to learn some basics of HTML by using jfiddle. This is what I've done.
https://jsfiddle.net/Lqn0jch3/
HTML
<body>
<div class="container">
<div class="sidebar">
<div class="logo"></div>
<div class="menu-options">
<p>yeeeeeep</p>
</div>
</div>
</div>
</body>
CSS
html, body {
height: 100%;
overflow-y: hidden;
}
.container {
background-color : #458748;
height: 100%;
}
.sidebar {
height: 100%;
width: 30%;
background-color : #000000;
}
.logo {
background-image: url("https://upload.wikimedia.org/wikipedia/en/thumb/3/31/Britannia_Industries_Logo.svg/1280px-Britannia_Industries_Logo.svg.png");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
height: 30%;
width: 100%;
text-align: center;
background-color: aqua;
}
.menu-options {
background-color: #FFFFFF;
}
p {
color: #000000;
}
But I can't understand why my 'menu-options' class is not being positioned just below the logo and there's some separation between them.
Thanks in advance.
is this what you want?
https://jsfiddle.net/Lqn0jch3/1/
i changed the css of p
p {
display: inline-block;
color: #000000;
}
the element <p> becomes margins by default, so changing its display or setting margin: 0px; would do the job for you
I've changed your class, modify the positioning to your needs:
.menu-options {
background-color: #FFFFFF;
position:relative;
top:-20px;
}
By default the browser adds margin to the top and bottom of the paragraph element, so to fix this you just have to change the margin to 0.
p {
margin: 0;
}
And you normally wouldn't use a paragraph element in a menu. An Unordered list works well. <ul> <li>
Separation between them is because of default margin style on element p
You can get diffrent default margin values on diffrent browsers, try using CSS Reset scripts.
So guys, im simply trying to have a clean footer that will appear at the end of the page content consistently, whether or not the content fills up the length of the page.
As of now, I've tried a few options, first, i've done it with a sticky footer:
html,
body {
margin:0;
padding:0;
height:100%;
}
#wrapper {
min-height:100%;
position:relative;
}
header {
padding: 1em;
background:#EFDECD; //#5ee;
text-align: center;
}
.mydiv{
height:calc(100% - 4em);
}
p{
font-family: Verdana, Geneva, sans-serif;
}
.paragraph{
font-size: 1em;
//font-family: Charcoal, sans-serif;
}
#content {
padding: 1em;
padding-bottom: 7em; /* Height of the footer element */
}
footer {
display: block;
width:100%;
height:4em;
// position: fixed;
bottom: 0;
left: 0;
background: #EFDECD; //#EFDECD
text-align: center;
overflow: hidden;
a{
padding: .75rem;
// position:relative;
top: 1.5em;
display: inline-block;
font-size: .72rem;
}
p{
font-size: .72rem;
}
}
video{
width: 100%;
height:auto;
}
//header{
////margin-top: 3ems;
// background-color: lightgrey;
//}
//footer{
// height: 5em;
// background-color: lightgrey;
// position: relative;
// bottom: 0px;
// width: 100%;
//
//}
.label{
margin-left: .5em;
margin-right: .5em;
}
table{
font-size: .75em;
}
.panel.callout a:not(.button):hover{
color: $anchor-font-color-hover;
}
.headingtext{
font-family: Century Gothic, sans-serif;
}
.headtext{
display:inline-block;
// font-size:3em;
margin: 0 10em;
text-align: center;
// font-family:"Courier New";
// font-weight: bold;
// margin-left: 6em;
}
.img2{
// max-height: 20%;
max-width: 25%;
float:right;
display:inline-block;
}
.accorborder{
border: black dotted 1px;
}
h6{font-weight: bold;}
.top-bar-section .right li .dropdown { /* left: auto; */ right: auto; }
dl.tabs dd{background-color:$oil;}
which works, but the footer is always visable and takes up screen space when there is important content on the page.
Ideally, I would like to change the position to 'absolute' and that looks fine on all the pages except on a page where there is not enough content, then the footer appears just below the content, and leaves a large white space gap from the footer to the bottomn of the page.
How can I simply make it so the footer always appears at the bottom of the page regardless of the page length? Also, feel free to inspect element to help. Currently its using the fixed position:
http://ops.emsofl.com/
A way to do it : set body and html to 100% height, then:
<div style="height:calc(100% - 30px);">
<!-- 30px for footer -->
<!-- header and content will be here -->
</div>
<footer style="height:30px;">must be fixed height</footer>
So, if you content is long, footer appears after it, if the page is empty, div will occupancy the whole screen anyway.
UPDATE try if it works in your browser jsfiddle
P.S. I've got a small netbook and don't see much of your page as it is, just header, footer and two lines of content (OK, may be ten lines :) )
You could move the footer into the content div and work with the position: absolute method you did.
It seems your body tag is not getting the full height of the page.. which probably is because you are floating elements and not clearing them properly, or you're using elements in the content div which are positioned absolute.. I haven't really checked the rest of the page..
Hope this helps.
I found site template.
body {
font: 10pt Arial, Helvetica, sans-serif;
background: #54463d;
margin: 0;
}
h2 {
font-size: 1.1em;
color: #752641;
margin-bottom: 0;
}
#container {
width: 500px;
margin: 0 auto;
background: #f0f0f0;
}
#header {
background: #8fa09b;
font-size: 24pt;
font-weight: bold;
color: #edeed5;
padding: 5px;
}
#content {
float: left;
width: 329px;
padding: 10px;
border-right: 1px dashed #183533;
background: #fff;
}
#content p {
margin-top: 0.3em
}
#sidebar {
float: left;
width: 120px;
padding: 10px;
}
#footer {
background: #8fa09b;
color: #fff;
padding: 5px;
}
.clear {
clear: both;
}
It works ok if content height more than menu height:
http://jsfiddle.net/R6MYH/1/
But, in another case, the site is not displayed correctly:
http://jsfiddle.net/a5SFM/
Make slight change in your design as mentioned below :
Put divs with id content and sidebar inside one div with float:left
Remove float:left from css #content and #sidebar
Add display:table-cell in css #content and #sidebar
Live Demo This will work in all cases.
Your inner html will look like :
<div style="float:left">
<div id="content">
<h2>Title</h2>
<p>There is only one sentence.</p>
</div>
<div id="sidebar">
<p>Lorem ipsum</p>
<p>Dolor sit amet</p>
<p>There is at text. Not really!</p>
<p>Link 4</p>
</div>
</div>
Advantages:
The main advantage of using display:table-cell is you don't have to set min-height. It will work even your side bar contains height of 1px.
More user friendly
Compatible in all the browsers (ie > 7)
You don't have to do any extra work like javascript/jquery.
create a div inside #container and put #content and #sidebar inside it.
and then replace float: left in css of both #content and #sidebar with display: table-cell
like this: http://jsfiddle.net/aneelkkhatri/a5SFM/6/
no use of min-height
A more general solution, would be to implement this using JavaScript (jquery)
Add this script to your document
$(document).ready(function () {
$("#content").height($(window).height() - $("#header").height() - $("#footer").height() - 40);
});
This will make the content height as same as the browser's window height in all cases
Don't forget to add this to inside your tag
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
Check it out here: http://jsfiddle.net/basharmadi/Mqy7y/
Try adding this to #content:
min-height:300px;
This will "extend" down the content div no matter what.
Try to put a min-height to your content div:
min-height: 200px;
Here:
#content {
float: left;
width: 329px;
padding: 10px;
border-right: 1px dashed #183533;
background: #fff;
min-height: 200px;
}
jsfiddle
I have a vertical layout that I want to remain centered on the page. One column stays fixed on the page while the other should scroll according to the content and there are some decorative floating divs that are absolute. I want the scrolling column to display 100% vertically, even if the content doesn't require the height, but I can't seem to get this to work. I've set the html tag and body tag to height:100%, as well as all of the necessary div tags. Having the html tag set to this attribute causes all of the content except for .content and .share to disappear.
Here is my html:
<html>
<body>
<div class="leaderboard"></div>
<div class="container">
<div class="share">
<p>All content © 2011
<br />
Web Design © Unillu, Megan Prior-Pfeifer</p></div>
<div class="sidebar1">
<img src="assets/llama.png" width="168" height="265" alt="Deathllama logo" />
<ul class="nav">
<li><img src="assets/phone.png" width="208" height="15" alt="How to put ringtones on your phone!" /></li>
<li><img src="assets/kill.png" width="208" height="31" alt="Kill a dinosaur the easy way!" /></li>
<li><img src="assets/ringtones.png" width="208" height="15" alt="Bad ringtones for you to use!" /></li>
<li><img src="assets/legal.png" width="208" height="15" alt="Use the content accordingly!"/></li>
<li><img src="assets/contact.png" width="208" height="15" alt="Talk to me!"/></li>
<li><img src="assets/faq.png" width="208" height="15" alt="Look here before you ask me anything!" /></li>
<li><img src="assets/home.png" width="208" height="15" alt="Go home!"/></li>
</ul>
<p> </p>
<div class="extraDiv1"></div>
<!-- end #sidebar1 --></div>
<div class="content">
<div class="extraDiv2"></div>
<p>Contact</p>
<div class="ads_column"></div>
<h3 id="text">Contact Brian, Creator:</h3>
<p id="text">brianbritvec#gmail.com</p>
<h5 id="text">Contact Megan, Webmaster:</h5>
<p id="text">mprior#unillu.com</p>
<!-- end .content --></div>
<!-- end .container --></div>
</body>
</html>
And here is my CSS:
html, body {
margin: 0;
padding: 0;
color: #FFF;
font-family: Myriad, Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
line-height: 1.4;
background-color: #61ADC3;
}
html {
min-height:100%;
}
body, .container, .content, .extraDiv2, .sidebar{
height:100%;
min-height:100%;
}
/* ~~ Element/tag selectors ~~ */
ul, ol, dl {
padding: 0;
margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
margin: 10;
padding-right: 15px;
padding-left: 15px;
}
a img {
border: none;
}
a:link, a:visited, a:hover, a:active, a:focus{
color: #FFF;
text-decoration: underline;
}
.container {
width: 640px;
margin: 0 auto;
overflow: hidden;
background-color: #61ADC3;
}
.sidebar1 {
z-index: 2;
float: left;
width: 224px;
padding-bottom: 10px;
position: fixed;
background-attachment: fixed;
background-color: #61ADC3;
background-repeat: no-repeat;
background-position: right top;
text-align: right;
padding-right: 32px;
}
.extraDiv1{
z-index:3;
position:absolute;
top:0;
width:29px;
height:609px;
margin-left:227px;
background-image: url(assets/sidebar.png);
background-repeat: no-repeat;
background-position: left top;
}
.extraDiv2{
z-index:5;
position:fixed;
margin-top:-10px;
width:12px;
background-image: url(assets/stripe.jpg);
background-repeat: repeat-y;
background-position: left;
}
.content {
z-index:5;
width: 384px;
float: right;
padding-top: 10px;
padding-right: 0px;
padding-bottom: 10px;
background-image: url(assets/gradient.png);
background-repeat: no-repeat;
background-position: right top;
background-attachment: scroll;
background-color: #FBB03B;
}
/* Hack for IE */
* html .content {
height: 100%;
}
/* End IE Hack */
.leaderboard {
width:795 px;
margin: 0px auto;
background-color: #61ADC3;
}
#descriptions {
font-size: 12px;
line-height: 1;
display: block;
width: 170px;
margin:15px 55px;
}
#descriptions h5 {
font-size:14px;
font-weight:bold;
}
#text {
font-size: 12px;
line-height: 1;
width: 200px;
margin: 15px 25px;
}
#text h5{
font-size: 14px;
font-weight: bold;
}
#play {
width: 25px;
margin-right:0px;
float:left;
}
.share {
z-index:5;
font-size:9px;
bottom: 0px;
text-align: right;
width: 256px;
position:fixed;
float: left;
color: #F00;
}
.share a {
color: #C30;
}
#ads_column {
float:right;
padding: 5 px 5 px 0 px 5px;
}
.content ul, .content ol {
padding: 0 15px 15px 40px;
}
ul.nav {
list-style: none; /* this removes the list marker
}
ul.nav li {
display: block;
margin: 5px;
}
ul.nav a, ul.nav a:visited {
margin: 5px;
display: block;
text-decoration: none;
}
ul.nav a:hover, ul.nav a:active, ul.nav a:focus {
border:1px;
border-color: #F30;
}
Your CSS is a huge mess.
First, avoid using position:fixed, especially on such large scale. Most mobile browsers don't "fix" those positions, and some older browsers render incorrectly with them.
height:100% means set the height to 100% of its parent container. However, which in this case is "container", which again is sized as 100% of its container, which is "body". As "body" does not have a height set on it, body's height gets calculated to be enough height to wrap the entire page.
Note: Setting height:100% on body doesn't work to make it scale to the entire window; you have to set position:absolute on body and make top/left/right/bottom zero to do that.
Back to the "body" height calculation. Notice that the sizing calculation does not include anything that is "floated", because when you "float" something, it takes it outside of the normal layout. Anything that is "floated" occupy no spacing!
Try this experiment: turn off overflow: hidden in your "container", and you'll see the height of "container" and "body" suddenly collapses into zero. All your elements are floated, so they take up no space if there is not overflow: hidden.
Thus, you whole mess of CSS is essentially telling "content" to size itself to 100% of the height of "container", which is 100% of "body", which is whatever height that is necessary to include all the content of the page. With overflow: hidden in "container", that height is the height of "content". Without overflow: hidden in "container", that height is zero.
If the height of "content" is 100% of zero, which is zero, and it does not itself have "overflow: hidden" set on it, and it is a block element, then this height will simply be ignored and the height becomes whatever height that is required to hold its elements.
There you go. Now you know why your orange doesn't extend all the way to the bottom of the screen. You were depending on height:100% on "body" to stretch it out to the full height of the screen; it doesn't work this way.
The solution?
DELETE THE WHOLE THING AND TOTALLY REWRITE YOUR CSS -- It is too much of a mess. You don't want this. And it will never work right for you. Get a good book on CSS and read through it, then do it RIGHT. CSS is not something you can learn via trial-and-error.
Start with position:absolute; left:0px; right:0px; top:0px; bottom:0px; on "body". This will stretch "body" to fill the whole window. Check it by setting a background color on "body".
Notice that #2 may not work on mobile browsers. You'll need to set a min-height in pixel value to make sure that it fills the whole screen.
I think it's the .extraDiv2 {height:100%} which is causing it.
It seems fine in Chrome 10, but very broken in IE9. Try removing the width on the .container element and change the float of the .content from right float to left float. It may help a little with IE9.
"I want the scrolling column to display 100% vertically, even if the content doesn't require the height, but I can't seem to get this to work"
Your best bet is to use some jQuery to set the height dynamically based on the viewport height.
Demo: http://jsfiddle.net/wdm954/a2jhw/
EDIT: To show w/ jquery loading.
<script type="text/javascript" src="js/jquery-1.5.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
fixHeight();
});
$(window).resize(function () {
fixHeight();
});
function fixHeight() {
var $h = $(window).height();
$('#someDiv').height($h);
}
</script>
EDIT: Ok basically here I created a function (fixHeight) where we put the code to fix the height. Then we run the function when the document is ready and when the window is resized.
Also here are some fixes for your code...
Closed the comment here.
ul.nav {
list-style: none; /* this removes the list marker */
}
Removed the spaces between your numbers and "px" here...
.leaderboard {
width: 795px;
margin: 0px auto;
background-color: #61ADC3;
}
#ads_column {
float: right;
padding: 5px 5px 0px 5px;
}
Height 100% only works if the cointainer block (html in this case) has a fixed height defined.
Other than that, I don't see why things should be disappearing.
EDIT: The above is not correct in html's case. (See comments)
In your case you need to set html to height:100% (instead of min-height:100%). That will fix the problem.
I concur with the opinion that the code can be improved, but good job, learning happens step by step.
I can't put this to work like it should, I'm not that good with CSS, I need you help!
I have a page like this:
<html>
<head><title>title</title></head>
<body>
<div id="page">
<div id="container">
<div id="head"><img src="..." alt="..." /></div>
<div id="content">
<div id="menu"><ul><li>...</li></ul></div>
<div id="content_body">stuff here</div>
</div>
<div id="footer"></div>
</div>
</div>
</body>
</html>
OK. My container div have a background color, I want that, as long as my text inside the content_body div expand, the background of the container div would expand too, but it is keeping a fixied height (it's just expanding the logo image height), and my text in the menu and content_body div is out of the background.
My CSS:
body
{
font-family: Tahoma, Verdana, Arial, Times New Roman;
background-color: #333333;
background-image: url(Images/bg.png);
background-repeat: repeat-x;
color: #000000;
margin: 0px;
}
input
{
font-family: Tahoma, Verdana, Arial, Times New Roman;
font-weight: bold;
}
h2
{
text-decoration: underline;
font-style: italic;
}
#page
{
width: 100%;
}
#container
{
overflow: visible;
width: 780px;
border: solid 6px #FFFFFF;
background-color: #DCDCCD;
margin: 0 auto;
margin-top: 15px;
}
#content
{
clear: both;
}
#menu
{
width: 240px;
display: block;
float: left;
}
#content_body
{
width: 500px;
display: block;
float: right;
}
What I'm doing wrong?
Everything in your #content div is floated, and well, floated elements don't really take up any space. Essentially since they are floated they are being taken outside of the regular stream of content and breaking the rules to be able to be pushed to the left or the right.
In order to get the div containing the floated elements to size with its content you could give is display: inline-block and maybe width: 100% so that it takes up the whole area...
#content{ display: inline-block, width: 100%; }
Giving it a display of inline-block makes everything outside of it think it is an inline-level element, but everything inside it is treated like it is a block-level element, and it ends up giving height to anything inside it that might be floated without having to give it a set height.
Try
#content
{
...
overflow: auto;
}
Edit:
Also make sure to add a width as DA points out in the comment below.
Try:
#footer{
clear:both;
}
demo