I am creating a site for which I have created a structure but I am facing height issue in that. here is what I am expecting
but this is what I am getting
Below is the CSS:
html {height:100%!important;}
body {
margin:0;
font:12px/15px "Lucida Sans Unicode", "Lucida Grande", sans-serif;
color:#8a8a8a;
min-width:1000px;
background:#fff;
min-height:100%!important;
}
#wrapper {
position:relative;
min-height:100%;
overflow:hidden;
background:url(../images/wrapper.jpeg) repeat-y;
}
#content {
float:left;
width:100%;
min-height:100%;
}
100% is just getting set to 100% of the content in it , try using a pixel height instead
#content {
float:left;
width:100%;
min-height:500px;
}
I would put a min-height in pixels on your wrapper. Since the #content is set to 100% height, it will fill all of the wrapper.
This way, if there is less content than needed to fill the full height of the browser, the page will add whitespace below your content to fill the browser height. I do this often when first building out a new page, since I don't have any content, but want to get an idea of how it will look when filling the browser window.
I would suggest doing something like this:
#wrapper {
position: relative;
min-height: 600px;
overflow: hidden;
background: url(../images/wrapper.jpeg) repeat-y;
}
You might want to adjust the min-height in pixels to fit your site- whatever it takes to make it fill the browser window.
Related
My html,body, wrapper width is 100%. When I test this with responsive mode , Inside wrapper every element is well fit and responsive .
But the width of body and wrapper is not same. At the right side theres 40px extra space creating .
I have checked every block,element layout by giving border color. All block are fits inside the wrapper but the html and body not fitting with the same width of wrapper. I tried to prevent this with overflow-x: hidden but nothing has changed.
html,body{
margin:0;
padding:0;
box-sizing:border-box;
font-family:"Varela Round",Sans-serif;
font-size:1.125rem;
height: auto;
overflow-x:hidden;
}
.wrapper{
width:100%;
max-width:1348px;
overflow-x:hidden;
}
You must use viewport height in body
body{
height: 100vh;
width: 100vw;
}
and in your wrapper:
.wrapper{
width:100%;
max-width:1348px;
overflow-x:hidden;
}
So I'm trying to design a webpage and was trying to get the footer to stick to the bottom of the page at all times. I did manage to do that with trouble but I figured out where my error was. What I want to know is what is the difference between doing this,
body {
background: red;
margin:0;
padding:0;
height:100%;
}
#wrapper {
min-height:100%;
position:relative;
}
#header {
background: black;
padding:10px;
}
#content {
background: green;
padding-bottom:100px; /* Height of the footer element */
}
#footer {
background:#ffab62;
width:100%;
height:100px;
position:absolute;
bottom:0;
left:0;
}
and doing this,
html,
body {
background: red;
margin:0;
padding:0;
height:100%;
}
#wrapper {
min-height:100%;
position:relative;
}
#header {
background: black;
padding:10px;
}
#content {
background: green;
padding-bottom:100px; /* Height of the footer element */
}
#footer {
background:#ffab62;
width:100%;
height:100px;
position:absolute;
bottom:0;
left:0;
}
Why does putting the html part at the top make the footer part of the code work? It doesn't seem to effect any of the other code, just the part that makes the footer stay at the bottom. This isn't my code just the code I got from here I have the same issue in my code though and was just wondering what the deal was cause I can't find anything on this.
http://www.cssreset.com/2010/css-tutorials/how-to-keep-footer-at-bottom-of-page-with-css/
Sorry if I wrote this wrong first time posting.
Body looks to its parent (HTML) for how to scale the dynamic property, so the HTML element needs to have it's height set as well.
the absolute position must be relative to another element and in your case the footer is relative to the body. By default the height of body and html isn't 100% to the screen, so if you make your footer absolute to the bottom of body it will be at the bottom of body not the screen so to solve this you made the body height is 100% of the html which must be also 100% to the screen.
you can also use the fixed position instead of absolute, position:fixed will be relative to the screen not to any other element so you footer will be in the bottom even the body and html height isn't 100%
I'm trying to make an useful command-line layout just using CSS. My inkscape draft looks like this:
The bottom div has a fixed height and flexible width. The top div must have both dimensions flexible.
I need this to work on mobile devicest too. In past, I have made this design using rather complicated javascript script which breaks on mobile devices.
I've been trying to do it using height in "%" but that's not very precise I guess:
div#output {
width:99%;
height:90%; //NOT A GOOD IDEA. DEPENDS ON WINDOW SIZE
overflow: scroll;// - breaks on big/small screens
overflow-x: hidden;
margin:0px;
padding:5px;
}
My question is: How to do this with no javascript? How should I fix my jsFiddle example?
I'd use calc for the height of the output window here is the updated JSfiddle
*{
margin:0px;
padding:0px;
}
html, body {
height:100%;
}
body {
background: black;
color: white;
font-family: monospace;
font-size:0;
}
div#output {
height:calc(100% - 40px);
overflow-y: scroll;
overflow-x: hidden;
padding:5px;
font-size:14px;
}
div#bottom{
height:30px;
line-height:30px;
font-size:14px;
}
The font-size:0 for the body is necessary to remove redundant spaces between the two DIVs.
Calc is subtracting 40px since the bottom is 30px and the output has a padding of 5px.
without using Calc is also possible with absolute positioning Here
*{
margin:0px;
padding:0px;
}
html, body {
height:100%;
}
body {
background: black;
color: white;
font-family: monospace;
font-size:0;
}
div#output {
position:absolute;
top:5px;
left:5px;
right:5px;
bottom:30px;
overflow-y: scroll;
overflow-x: hidden;
font-size:14px;
}
div#bottom{
position:absolute;
left:5px;
bottom:0;
height:30px;
line-height:30px;
font-size:14px;
}
Set the height of the html and body to 100%. That is what the 90% is scaling against.
I'd do it like this http://jsfiddle.net/081tcm3m/1/
There is no need to set width to block elements. It's the height important here. Setting it to 100% to body makes page fit the available screen height (if there is no margin).
edit
You are right, dimensions in % are not precise, so I decided to use position absolute and right, left, top, bottom properties to stretch div#output and make fixed margin for bottom input line.
Try http://jsfiddle.net/081tcm3m/4/
I am aware that using the css
#fullpage{
top:0;
bottom:0;
left:0;
right:0;
width:100%;height:100%;
position: absolute;
}
fills the entire page, however I want this, then below it, i.e one page length down, I want another space that is equal to 100% of the screens height.
So in theory I want two divs, both equal to 100% screen height and 100% screen width, one ontop of the other, equalling to 200% of the page height.
Any help guys?
For the second div, add top: 100% in addition to the rules you already have.
http://jsfiddle.net/ExplosionPIlls/FZG49/
No need for absolute positioning..
just reset the html and body and add two full width/height divs..
<div id="page-1"></div>
<div id="page-2"></div>
with
html, body {
width:100%;
height:100%;
padding:0;
margin:0;
}
#page-1, #page-2 {
width:100%;
height:100%;
background-color: red;
}
#page-2 {
background-color: blue;
}
demo at http://jsfiddle.net/FZG49/1/
I have a header in a website that I want to fill the top portion of the site no matter what the browser size is.
h1 {
font-family: 'Holtwood One SC';
color: #1C003A;
font-size: 4em;
}
#header {
float:left;
text-align:center;
width: 95%;
margin: 0px 20px 0px 20px;
}
<div id="header"><h1>Spilling the Beans</h1></div>
this is the CSS and HTML. The div for the header is just in the body. I don't know what to input to make this expand and shrink with the browser.
Well, if you just remove the float:left and width:95%, then it will automatically take the full width of the browser because that's the default.
If, however, you're actually talking about making the text size itself get bigger and smaller depending on browser size, you can try using Viewport Units:
h1 {
font-size:4em;
font-size:5vw;
}
It is very important to have the first one be in pt, px, em or other common unit, so that browsers that don't support Viewport Units have something to fall back on. As for the Viewport Unit, adjust as desired. You can also use vh instead of vw to adjust the text size based on the height of the viewport rather than the width.
If this isn't what you mean either, please be more specific.
you should be setting your margins in body and remove float and margin on the header
body{
margin:0; padding:20px;
}
#header {
text-align:center;
width: 100%;
background:#ccc;
margin:auto;
}
see http://jsfiddle.net/8dtqs/