I'm designing a page for my blog, and I discovered that when I have my div.page-content within the body, it's glitching out and resizing the whole body to the top of the div... I need the body to fill the viewport no matter what.
Relevant HTML
<body>
<div class="page-content"> <!-- THIS IS MY .page-content DIV -->
asdasd
</div>
</body>
Relevant CSS
body, html {
height: 100%; width: 100%; /* Shouldn't this make the page guaranteed to fill the viewport? */
margin: 0; padding: 0;
background-color: #fdfdfd;
font-family: Roboto, Arial;
color: #424242;
background-repeat: no-repeat;
background-size: cover; /* I'm gonna have a blurred background image */
}
.page-content {
min-height: 300px; width: 600px;
margin: 60px auto 30px auto;
background-color: blue;
}
JSFiddle: http://jsfiddle.net/deansheather/5et5kgsn/
I have not an idea if there is a javascript way to fix this, but I'd prefer CSS and HTML only answers please.
I'm sorry about the really weird explanation, it's what came into my head.
You have to set the .page-content class height to auto. Think your problem solved.try this:
body, html {
margin: 0; padding: 0;
background-color: #fdfdfd;
font-family: Roboto, Arial;
color: #424242;
background-repeat: no-repeat;
background-size: cover; /* I'm gonna have a blurred background image */
}
.page-content {
min-height: 300px; width: 600px; height: auto;
margin: 60px auto 30px auto;
background-color: blue;
}
Related
I have a static html page, unfortunately when when I run my page and check responsiveness, I see white space on the right side of of my page, I followed many solution here in stack overflow by adding the following code:
inline I tried to add
html, body {
font: normal 16px sans-serif;
color: #555;
box-sizing: border-box;
margin: 0;
padding: 0;
height: 100%;
width: 100%;
overflow-x: hidden;
}
but this didn't work. I tried to add this in my CSS file:
html, body {
font: normal 16px sans-serif;
color: #555;
box-sizing: border-box;
margin: 0;
padding: 0;
height: 100%;
width: 100%;
overflow-x: hidden;
}
also didn't work. here is the page I am building: demo
What is wrong with my page?
The issue is due to the .Navbar element which exceedes the 100% of the viewport
Since its left offset is 30px instead of width: 100% set to width: calc(100% - 30px) (or alternatively, set left: 0) and rearrange the space/size of the inner elements
Add position: relative in your css body and "!important" in your margin see code below.
html, body {
font: normal 16px sans-serif;
color: #555;
box-sizing: border-box;
margin: 0 !important;
padding: 0;
height: 100%;
width: 100%;
overflow-x: hidden;
position: relative;
}
Then move your menu a little bit to the right use this update your .main-banner set the new value for padding
.main-banner {
background-image: url(../images/bg.png);
background-repeat: no-repeat;
background-size: auto;
width: 100%;
height: 100%;
padding: 20px 65px;
Ok, so I've been making a website and a problem that I had with it is that the inner div #content wasn't expanding to the full size of the page, letting text flow over in a sloppy manner that made it hard to read over the background image.
I used overflow: auto; to fix my problem, but now there's a scrollbar that I didn't want on the page.
Here's the parts of the CSS that manage the body, html, and #content elements (#content is a div).
body, html {
height: 100%;
font-family: Helvetica, Arial, sans-serif;
}
body {
background-color: black;
color: white;
background: url('c12background.jpg');
}
#content {
height: 100%;
width: 80%;
margin: auto;
padding: 5px 5px 5px 5px;
background-color: black;
overflow: auto;
}
Add margin:0;
body, html {
margin: 0; /* ADD */
height: 100%;
font-family: Helvetica, Arial, sans-serif;
}
You dont have to include overflow in your #content, instead add word-wrap in your P tags:
p,a,li{
word-wrap: break-word;
}
I have this image on my website, but when I zoom with the scroll, the image becomes blurred. So, what I need it is not resize when I zoom.
This is my CSS code:
body
{
margin: 0;
color: #bbb;
font-size: 0.9em;
background-color: #202121;
background-image: url("img/wild_oliva.png");
background-size: initial;
}
The image must be repeated on the screen.
body
{
margin: 0;
color: #bbb;
font-size: 0.9em;
background-color: #202121;
background-image: url("img/wild_oliva.png");
background-size: initial;
}
img{
max-width: 100%;
height: auto;
}
You might want to try something like this and see if it works.
I have been following this tutorial on how to keep the footer at the bottom of the page, even when there isn't much content:
http://www.cssreset.com/how-to-keep-footer-at-bottom-of-page-with-css/
As far as I can tell, I have put in all of the necessary properties specified by the tutorial, but the footer still won't stick to the bottom of the page.
When I looked at the page using firebug, I could see that the HTML and body had a height of 100%, but despite using "min-height: 100%;" for #wrapper, it still does not fill 100% of the window.
Here are the important sections of the CSS, but if you want to see the full source code, it is live here: http://ewanroycroft.co.uk/bc/
html {
padding: 0;
margin: 0;
height: 100%;
}
body {
width: 100%;
height: auto;
min-height: 100%;
padding: 0;
margin: 0;
font-family: 'Trebuchet MS', Helvetica, sans-serif;
background-color: #E9E9E9;
}
#wrapper {
width: 100%;
height: 100%;
position: relative;
}
#headerWrap {
width: 100%;
height: 120px;
min-width: 600px;
padding-bottom: 1px;
background: url("images/bg-header.png") repeat-x scroll left bottom #FFFFFF;
}
#content {
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
min-width: 600px;
max-width: 900px;
margin: 0 auto 0 auto;
padding: 0px 25px 80px 25px;
}
#footerWrap {
clear: both;
width: 100%;
height: 80px;
min-width: 600px;
background-color: #231F20;
box-shadow: 0px 0px 10px 0px #231F20;
position: absolute;
bottom: 0;
}
Thanks in advance for your help!
I went to your website http://ewanroycroft.co.uk/bc/. I don't know what you want exactly, but if you want it to be always fixed at the bottom of the page, you should look at 'position: fixed' attribute for CSS.
If you want it to be at the bottom, but still going when user scrolls down, I'd suggest 'min-height: ###px' attribute.
I visited your webpage and made this fixe:
#content{
...
min-height: 600px;
...
}
and the bottom went down. For better usage, you should get user's height with Javascript then set it to #content's min-height (doing the exact math).
Hope it can help!
There's two things that you're missing according to the guide that you posted:
Set the body's height to 100%. It is currently auto.
Don't set height for the wrapper. Instead, set min-height.
After that, it should behave like you expect.
I'm trying to create a gradient background, and then a solid color box in the center and then type text in it. My code is below, works great but the solid color box (body) isn't flush with the top of the browser, there is a little space between. How do you get rid of this?
html {
text-align: center;
background-color: #FFF;
background-image: url(../../Public/Documents/Business/Running%20Companies/Enlightenment%20Project/Website/images/bg.jpg);
background-repeat: repeat-x;
margin: 0px;
}
body {
background-color: #FFFFFF;
height: 768px;
width: 1024px;
margin: auto;
}
**Update
Working Code Below:
html {
font-family: sans-serif; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */
-ms-text-size-adjust: 100%; /* 2 */
background-color: #FFF;
background-image: url(images/bg.jpg);
background-repeat: repeat-x;
}
/*
* Removes default margin.
*/
body {
margin: auto;
background-color: #FFF;
height: 768px;
width: 1024px;
padding-top: 1px;
padding-right: 10px;
padding-bottom: 0px;
padding-left: 25px;
}
As #loktar commented, try a margin: 0 for the body (sorry #loktar, new here)
I suggest using normalize.css within all your projects to get rid of these little issues.