I have a header with 60px height when document width is greater than 760px. So, the body is show just below the header and no problem, but when width become smaller, the height it's two lines (120px) so the body is partially hidden at the top.
How can I solve this?
Here is the code I use:
.main_header {
width:100%;
height:auto !important;
background-color:#F2F2F2;
border-bottom:1px solid #CCC;
position:fixed;
top:0px;
z-index:100;
}
.main_body {
margin:70px auto;
}
Note: The page is responsive.
You can set the margin of .main-body first to be 120px, which will apply to all window sizes. Then you can override the margin at a specific width using a media query. Note: with the CSS shorthand you are using, the main-body top and bottom margins will be affected.
<style>
.main_body {
margin:120px auto;
}
#media(min-width: 761px){
.main_body {
margin:70px auto;
}
}
</style>
Media Query Documentation: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
Related
I'm currently making a CSS layout and I have divs side by side in the main content. When the page is resized one drops below the other. When this happens I want the top div to take up the width of the parent div
#MainWrapper #Content {
float: left;
background-color:#E4E4E4;
width:100%;
max-width:1180px;
clear:left;
font-family: Bebas;
}
#Welcometext {
max-width: 500px;
min-width: 100%;
background-color:#399;
display:inline-block;
}
#Slideshow {
width: 100px;
background-color:#C96;
min-width: 200px;
display:inline-block;
}
From your last comment, I think you want to look into # media queries.
You can tell it to change specific properties when the width of the window drops below your specified width.
#media (max-width: 600px) {
#Welcometext{
Properties specific to to a screen size under 600px;
}
}
CSS Media Queries
I have two columns for my website and right now the background color ends at the last piece of content in the left column (which is for navigation).
I've tried height:100%, min-height:100%; etc. Doesn't seem to work. here's the css.
.container {
width: 100%;
height:100%;
min-width: 960px;
background: #fbf6f0;
margin: 0 auto;
overflow: hidden;
}
#sidebar1 {
float: left;
position:absolute;
width: 20%;
height:100%;
min-width:220px;
background: none repeat scroll 0% 0% #007cb8;
z-index:9999;
}
Use viewport height - vh.
.container {
height: 100vh;
}
Update
Please note, there are potential issues with using VH on Safari iOS. See this thread for more information: Chrome / Safari not filling 100% height of flex parent
Set the body height too
body,html{
height:100%;
}
div {
height:100%
}
The reason the div doesn't fill the entire window by default if because it's parent, the <body> tag probably, only stretches as heigh as it needs to. Add this at the top of your stylesheet (I like to order styles in a similar order to that of the tags in the markup):
html, body {
height:100%;
min-height:100%;
}
edit: grammar
overflow-y: auto;
This css code is for your solution.
I'm trying to create a div (topbar) (width = 100%;). Below that I want my maincontent in a div with my maincontent. This needs to be 600px in width and centeret in the screen.
Normally I would set body width = 600px and margin: auto, but then my topbar is shortened.
Whats the easiest way to do this?
There is no need to touch the width of the body element
#topbar {
width:100%;
height: 150px; // Whatever height you want
}
#mainContent {
width: 600px;
margin: 0 auto; // Center on the screen
}
If I understand correctly, you want #topbar to extend 100% of the width of the page which it is not currently doing if the browser window is less than 600px... because #maincontent pushes the page out past 600px?
I believe you will need to have a body { min-width:600px; } to force topbar to 600px if the page is less than 600px wide.
Here's a fiddle of a potential solution: http://jsfiddle.net/z2dEK/1/
And here's the CSS:
body {
background:#ccc;
min-width:600px;
}
#topbar {
background:#000;
height:100px;
width:100%;
}
#maincontent {
background:#fff;
margin:auto;
width:600px;
height:100px;
}
I want to create an HTML page which:
Appears centred horizontally
Has a white background the entire height of the window
Contains a fixed header and scrollable content
I am having two issues related to {width: 100%} and {height: 100%}.
My header is 100% of the page width, when I expect it to be 100% of its parent width.
The background appears at 100% of the window height, but it then scrolls up with the content.
I would appreciate any help in understanding how CSS treats the 100% value in these two cases. I am not asking for a workaround: I already have that. I am asking for insights into the way CSS thinks.
Many thanks in advance,
James
Here's a demo of the issue
And here's the barebones HTML:
<!DOCTYPE html>
<head>
<title>Width & Height 100%</title>
<style>
html {
height:100%;
}
body {
background: #666;
height: 100%;
margin: 0;
}
#container {
position: relative;
height:100%;
background: white;
width: 400px;
margin: 0 auto;
padding: 0 0;
}
#header {
position:fixed;
z-index:100;
background:#ffe;
/* width:760px; */
width:100%;
height:64px;
}
#content {
position: absolute;
left:20px;
width:360px;
height:360px;
margin:64px 0 0 0;
background:#efe;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
Fixed header
</div>
<div id="content">
Scrollable content
</div>
</div>
</body>
</html>
All of these fixed positions are going to give you headaches.
About the widths: the box model is usually the problem. I start every CSS with body height and width set to 100%, and then reset my box model so it matches across browsers, and applies all of my padding to the inside of a box instead of the outside:
/* Set box models to match across browsers. */
* {
box-sizing:border-box;
-moz-box-sizing:border-box;
webkit-box-sizing:border-box;
max-width:100%;
}
Then set your width on a container using padding, first the mobile width, then the screen width to override:
#container {
padding: 0px 10px;
}
#media only screen
and (min-width : 700px) {
#container {
padding: 0% 30%;
}
}
For a full layout, you can visit my site:
http://instancia.net/fluid-sticky-footer-layout/
I should probably add the mobile bit to that page. :)
Fix header
Change the header position fixed to position absolute
Fix content height
* {
margin: 0;
}
html, body {
height: 100%;
}
#container{
min-height: 100%;
height: auto !important;
height: 100%;
background:#efe;
}
#content {
padding: 64px 20px 0;
}
Live example with pos fixed
http://jsfiddle.net/qB4sD/1/
I would like to make the html, body and wrapper elements all have a minimum height of 100% in order to cover the whole viewing window, but I have found that I can only make html obey this declaration.
html, body, #wrapper {
min-height:100%;
}
html {
border: 2px red solid;
}
body{
border: 2px blue solid;
}
#wrapper {
border: 2px pink dotted;
}
Create a simple html document with only a #wrapper div which can either have content in it or not. If a min-height of pixels is used, the elements obey it, but when I use percentages only html will work. Why is this?
Use height instead of min-height.
body,html{
height: 100%;
}
#wrapper {
height: 100%;
}
This will definitely help you...
http://www.cssstickyfooter.com/using-sticky-footer-code.html