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;
}
Related
This question already has answers here:
How to make a div 100% height of the browser window
(39 answers)
Closed 4 years ago.
I am trying to make a scrollable div box, and it's height should be exact fit to screen's height(100%).
The problem is if there is a another div box on the top which is the fixed height, how do I make scrollable box to fit to the screen's height?
This is what I tried
<div class="wrap">
<div class="top">
Fixed height 100px. No floating or layered box
</div>
<div class="scrollBox">
Fluid height to screen height 100%
<br>test<br><br>test<br><br>test<br><br>test<br><br>test<br><br>test<br><br>test<br><br>test<br><br>test<br><br>test<br><br>test<br><br>test<br><br>test<br><br>test<br><br>test<br><br>test<br>
</div>
</div>
html, body { height:100%; margin:0; padding:0; }
.wrap { height:100%; background:lightblue }
.top { height:100px; background:green}
.scrollBox { width:80%; height:100%; margin:0 auto 0 auto; border:1px solid #000; overflow-y:auto; background:#eee; }
This is my demo here
http://jsfiddle.net/a5ktensk/77/
Please help
You can use the vh unit to achieve this.
So
.scrollBox {height: 100vh; }
vh means viewheight, so will be the current height shown, you can take a little away using the calc feature in CSS
.scrollBox {height: calc(100vh - 100px);
So that will be 100% of the hieght minus 100px for example if you want a fixed div at the top :)
http://jsfiddle.net/g7d2k59m/1/
I think there calc() function will be handy, try following way:
.scrollBox {
width:80%;
height:calc(100% - 100px); /* Key Line */
margin:0 auto 0 auto;
border:1px solid #000;
overflow-y:auto; background:#eee;
}
Apply height: 100vh; overflow: hidden; to .wrap.
Height in vh will force page to use full height as per viewport.
Viewport Height (vh) – A percentage of the full viewport height. 10vh
will resolve to 10% of the current viewport height.
Overflow:hidden will stop .wrap from scrolling.
html, body { height:100%; margin:0; padding:0; }
.wrap { height:100%; background:lightblue;height: 100vh;overflow: hidden; }
.top { height:100px; background:green}
.scrollBox { width:80%; height:100%; margin:0 auto 0 auto; border:1px solid #000; overflow-y:auto; background:#eee; }
<div class="wrap">
<div class="top">
Fixed height 100px. No floating or layered box
</div>
<div class="scrollBox">
Fluid height to screen height 100%
<br>test<br><br>test<br><br>test<br><br>test<br><br>test<br><br>test<br><br>test<br><br>test<br><br>test<br><br>test<br><br>test<br><br>test<br><br>test<br><br>test<br><br>test<br><br>test<br>
</div>
</div>
To know more about viewport units -
https://css-tricks.com/fun-viewport-units/
https://www.w3schools.com/cssref/css_units.asp
Hope this helps :)
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
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 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/