I'm using this following code:
body {
margin-bottom: 40px;
margin-right: 30px;
margin-left: 30px;
margin-top: 40px;
text-align: center;
font-size: 14px;
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
}
Everything is good from the top and sideways but the page doesn't reach to the bottom. How can I get it to reach all the way to the bottom?
Add height: 100%;
http://jsfiddle.net/uTG2R/
EDIT:
It appeared that it wasn't only the html and body that needed to have their height set, but the table within was the actual culprit. By defining the height of the html and body tags we could then set the defined height of the table tag.
Try this in CSS
body {
margin-bottom: 40px;
margin-right: 30px;
margin-left: 30px;
margin-top: 40px;
text-align: center;
font-size: 14px;
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
background-color: gray;
height: 100%;
}
html, table
{
height:100%;
}
Please correct your code at <body style=""> remove style="". it should be <body>
Make body have 100% of the browser height
Body looks to its parent (HTML) for how to scale the dynamic property,
so HTML needs to be set too.
Add height: 100%; to your css. This should do what you require.
By the provided link 84.229.230.105:8080/NiceTry2/MyServlet, what you need is additionally to the body height, set also the height to 100% on the HTML tag.
CSS
html {
height: 100%;
}
EDITED:
Just builded a Fiddle with a more accurate sample to solve the problem you are having without causing another one:
The Fiddle here!
Since the solution of 100% to stretch the body all the way down does solve the issue, the margin at the top and bottom of the body tag causes a certain overflow of the body tag, since 100% + 40px + 40px is always bigger than 100% :)
The Fiddle suggests that the HTML and BODY tags have 100% x 100% of the view port size, and using one absolutely positioned div to wrap the entirely page content. The mentioned wrapper gets the required margins.
Related
This question already has answers here:
Percentage Height HTML 5/CSS
(7 answers)
Why does height 100% work when DOCTYPE is removed?
(5 answers)
Closed 2 years ago.
I was seeing this video by Traversy Media where he shows how to make a parallax website. At this point he selects html as well as body tag. I thought what could be the difference, and adding html with body tag would be redundant as html only has body and head in it, and since we are styling body, everything we want to style, gets styled just by selecting body. So I didn't write "html" in my code initially, and the result: background images were just covering the background of element and extra part was hidden (which should have been expected as per my code, but I was wondering why our results differed. Then i realized that my code was working as it should and his differently). Then I realized that there is difference between selecting body and selecting html (i still don't know the difference). So I wrote code after body for selecting html, and set html's height to 100%. Now I was getting what was shown in the video. But I don't understand how. Basis on my knowledge, this shouldn't have made a difference as "body" has it's height set to "100%" in the code. And when I removed height of body, it was working just like before i.e. background images were only covering the element, even though html's height was set to 100%. I also don't understand the purpose of setting height of html and body. Don't they by default cover the complete viewport?
(This is my first question, please let me know if I need to make any changes to the question to make it answerable)
Edits:
Links added, added ".pimg1, .pimg2, .pimg3{background-attachment: fixed;}" on the first code snippet, add second code snippet (expected result but undesired)
My code which causes it to work how i intend to (desired but non-understable) (Preview):
body{
height: 100%;
margin: 0;
font-size: 16px;
font-family: "Lato", sans-serif;
font-weight: 400;
line-height: 1.8em;
color:#666;
}
html{
height: 100%;
}
.pimg1, .pimg2, .pimg3{
background-attachment: fixed;
}
.pimg1{
background-image:url('../img/image1.jpg');
min-height: 100%;
}
.pimg2{
background-image:url('../img/image2.jpg');
min-height: 400px;
}
.pimg3{
background-image:url('../img/image3.jpg');
min-height: 400px;
}
Code that i wrote initially (expected but undesired) (Preview)
body{
margin: 0;
font-size: 16px;
font-family: "Lato", sans-serif;
font-weight: 400;
line-height: 1.8em;
color:#666;
height: 100%;
}
.pimg1, .pimg2, .pimg3{
background-attachment: fixed;
}
.pimg1{
background-image:url('../img/image1.jpg');
height: 100%;
}
.pimg2{
background-image:url('../img/image2.jpg');
min-height: 400px;
}
.pimg3{
background-image:url('../img/image3.jpg');
min-height: 400px;
}
p{
font-size:30px;
}
Solved: I was editing the container div's height and thought that i was just editing the background-image's height. So illogical of me. I understand now. Thanks https://stackoverflow.com/users/897416/charles and https://stackoverflow.com/users/8620333/temani-afif
If you do not define the height of html but define a percentage height on body then that value is computed to auto.
From height (MDN):
The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to auto. A percentage height on the root element is relative to the initial containing block.
Alternatively, you can use viewport units (e.g., vh). For example:
.pimg1 {
background-image: url("../img/image1.jpg");
min-height: 100vh;
}
… then you don't need to define the height on either html or body.
See CSS values and units (MDN)
My question is about unintended overflow. I made a web page yet the body overflows all other elements. I have set the width to 50% 100% 150% and no matter what i do, 1/4 of the body overflows. I tried adjusting div elements width and still could not fix the problem
https://codepen.io/pnkonx/pen/LgPwKE
body{
background-color:#f7ce58;
color: #5e1c10;
font-family: stylish, sans-serif;
height: 100%;
width: ;
here is a link to the project i am working on.
h1 is the guilty one.
h1 {
font-size: 20px;
margin-left: 60%;
width: 65%;
}
Remove the margin value and use text-align: right instead.
For the next times, use this short snippet to fix it quickly.
* {
border: solid 1px red;
}
I am having some trouble understanding why my relative div (.wrap) will not display its css defined background color or image. The body has its own background with the .wrap creating a new one for the div and its contents. (.local is the absolute div I am trying to have .wrap create a background for, as it is one of the many divs I need to have a single shared background from .wrap)
Any help will be greatly appriciated!
CSS
body{
min-height: 100%;
min-width:100%;
font-family: 'Open Sans', sans-serif;
background-color: gray;
}
.wrap {
position: relative;
height: 100%;
width: 70%;
background-color: white;
left: 15%;
}
.local {
position: absolute;
height: 40%;
width: 20%;
}
HTML
<!-- MAIN BODY -->
<div class="wrap">
<!-- LOCAL WEATHER -->
<div class="local">
<p>THIS IS A TEST PARAGRAPH TO SHOW THE RELATIVE DIV ISSUE</p>
<!-- <img src="images/weatherphoto.png"> -->
</div>
</div>
When you absolutely position .local, it takes it out of the flow. With it out of the flow, there is nothing inside .wrap so it collapses to a height of 0. Since .wrap has a height of 0, and .local is out of the flow, body has nothing inside it, so it too collapses to a height of 0.
Using a percentage sets the height of the element to be a percentage of its containing element. If everything is collapsed, there is nothing to be a percentage of.
If you want body to occupy the height of the whole screen, perhaps consider using the vh value which is calculated based on the viewport height.
I beleive updating your body style to:
body{
height: 100vh;
min-width:100%;
font-family: 'Open Sans', sans-serif;
background-color: gray;
}
will give you the outcome you were expecting, because it defines the height of the body as something that is relative to the viewport, which in turn gives .local something to be a percentage of.
Your problem is that your wrap class (in addition to your local class actually occupies no height. You specify a min-height: 100% in your body, but as body has no parent with a fixed height, that won't do actually ever do anything ;)
What you're actually looking for is height: 100vh on body to make sure it occupies 100% of the height of the page. An example of that can be found here.
However, what I would recommend is to instead set the height in the wrap class.
.wrap {
position: relative;
height: 300px;
width: 70%;
background-color: white;
left: 15%;
}
This will bring up the second background colour, as expected :)
I've created a fiddle showcasing this here.
Hope this helps!
This happens only when I do a selection in the page and move the mouse to the right. Can you help? please look the attached picture.
In order for us to help you, you should be posting code snippets instead of a link to your website. It's against the rules as #Harry stated to do anything otherwise.
That said, I think the issue is coming from the fact that you're using elastics widths with your site. Keep in mind that when you do this, you need to watch your padding as in some browsers, they expand the widths beyond the max screen size.
I think the issue for you is coming about as you have:
article.header {
background-color: #1949CF;
padding: 3px;
padding-top: 7px;
}
coupled with
.module {
width: 100%;
float: left;
display: block;
clear: both;
}
both being called near the beginning of your code:
<article class="module header">
Thus, the padding: 3px; is extending the width: 100%; set by .module to essentially overflow your container.
To see this, use the Chrome -> Inspect Element tool by right clicking on your website. By hovering over your <article class="module header"> section, you will see that the width being shown is beyond the max width of your browser window.
This may not be the only spot in your code that needs fixed, but this should get to on the right track of how to debug your issue.
You can set the body's width at 100% with overflow: hidden.
body {
background-size: 100%;
background-position: center 1%;
background-repeat: no-repeat;
font-family: "Arial Narrow", Arial;
font-stretch: condensed;
font-size: 0.9em;
text-align: center;
overflow-x: hidden;
padding: 0;
margin: 0;
width: 100%;
}
I have a very short (in height) page here: http://www.problemio.com/auth/forgot_password.php and it looks extremely awkward since the background color only goes down until the page ends.
I thought about making a set height to extend below the screen, but don't really want to do that because it will make my css more messy.
Is there a simple way to make that kind of a page extend all the way down?
here is my css that sets the general layout:
body, html
{
#padding: 5px;
}
body
{
font-family: "Century Gothic",Helvetica,Arial,sans-serif;
margin: 0;
padding: 0;
font-size: 1em;
background-color: #5C5957;
#background:url(/img/ui/background_image.png) top left no-repeat;
#background-size: 100%;
}
/* makes the background of the top bar gray */
.container
{
position: relative;
background-color: white;
overflow:hidden;
width:1000px;
margin: 0 auto;
}
Thanks!
Place the background-color rule to the html element also as:
html { background-color: #5C5957; }
Give the page a minimum height of 100%?
You Can also give min-height to layout div say 500px.