I have been searching for this on SO, but I just could not find something exactly similar.
What I am trying to achieve is to have a page, that is full in height and in width, but does have a fixed header. The content height needs to be the remaining area left, but that area needs to have a height of 100%, most of the html code found on SO is just using height: auto. Basically I want to do this so that I can style it: adding border etc. Here's the code so far:
<html>
<head>
<title>Test</title>
<style type="text/css">
body, html {
height:100%;
}
body {
margin:0;
padding:0;
}
#header{
height:50px;
background:green;
width:100%;
}
#wrapper {
background:blue;
position:relative;
min-height:100%;
height:auto !important;
height:100%;
}
#content {
margin: 10px;
background-color: black;
height: 100%;
width: 100%;
border: 3px dashed gray;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">header</div>
<div id="content"></div>
</div>
</body>
</html>
See: http://jsbin.com/agiyer
Note that if the content is too tall to fit inside #content, it will simply be hidden.
HTML:
<div id="header">header</div>
<div id="content">content</div>
CSS:
#header {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 50px;
background: green
}
#content {
position: absolute;
top: 50px;
left: 0;
bottom: 0;
right: 0;
border: 3px dashed gray;
background: #ccc
}
Related
So I can successfully center a div using the following CSS:
.container {
width: 1024px;
margin: 0 auto;
}
I then have the container inside the body tags, covering all the displayed page content. This works just fine.
The issue is that when I do the same thing but set the width to 100%, the page is no longer centered. This restricts how dynamic I can make my page, as I have to then create a container for each screen width (in px).
How can I create a container that will center my page with a width of 100%?
Many thanks.
if you want to just center a div within a container.Then you have style div within container as margin:0 auto; . Below is simple demonstration:
.container_
{
width:100%;
height:700px;
background:green;
}
.centreBox
{
width:50%;
height:50%;
margin:0 auto;
background:red;
}
<div class="container_">
<div class="centreBox">
</div>
</div>
And if you want div to place it horizontally as well as vertically in center
.container_
{
width:100%;
height:700px;
position:relative;
background:green;
}
.centreBox
{
width:50%;
height:50%;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
background:red;
}
<div class="container_">
<div class="centreBox">
</div>
</div>
And you want to place div with width 100% ,then it will occupy whole horizontal space available.There you can only apply vertical centering:
.container_
{
width:100%;
height:700px;
position:relative;
background:green;
}
.centreBox
{
width:100%;
height:50%;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
background:red;
}
<div class="container_">
<div class="centreBox">
</div>
</div>
Hope this helps :)
If you have text inside that container which you want to center, add text-align: center; to the CSS rule you posted.
If you have other elements inside the container which you want to center, apply margin: 0 auto to them, as you did to the container itself (they need a width less than 100% for that to have any effect...)
I tried to create a minimal working example:
<!DOCTYPE html>
<html>
<head>
<title>CSS center</title>
<style type="text/css">
.container {
height: 100px;
width: 100%;
background-color: red;
}
.content {
margin: 0 auto;
height: 100px;
width: 80%;
background-color: blue;
}
</style>
</head>
<body>
<div class="container">
<div class="content"></div>
</div>
</body>
</html>
The blue content is 80% of the red container width and is centered in the parent.
If you want to center content you should add margin: 0 auto; to content.Not to container.
.container {
width: 100%;
}
.content {
margin: 0 auto;
height: 100px;
width: 50%;
background-color: black;
}
This is my code:
<style >
html,body {
height:100%;
margin:0;
background:red;
}
#main {
height:100%;
background:yellow;
}
h1 {
margin:0;
}
</style>
<body >
<div>
<h1>Header</h1>
</div>
<div id="main">
Adjust the height
</div>
</body>
I want div main to cover the whole viewport without extending the screen further to the bottom. With the above code, a vertical scrollbar appears because we exceed the viewport height. How may I oblige #mainto stop exactly at the bottom of the viewport?
You could give a height to <h1> and based on it calculate the height of body.
html,
body {
height: 100%;
margin: 0;
background: red;
}
#main {
height: calc(100% - 35px);
background: yellow;
}
h1 {
margin: 0;
height: 35px;
}
<div>
<h1>Header</h1>
</div>
<div id="main">
Adjust the height
</div>
You may use flex to make this easy :
body {
display: flex;
flex-flow: column;
}
html,
body {
height: 100%;
margin: 0;
background: red;
}
#main {
background: yellow;
}
h1 {
margin: 0;
}
<style>
html,
body {
height: 100%;
margin: 0;
background: red;
}
#main {
height: 100%;
background: yellow;
/* overflow:auto; depends on behavior expected when too much content */
}
h1 {
margin: 0;
}
</style>
<body>
<div>
<h1>Header within a div of any height </h1>
</div>
<div id="main">
Adjust the height, should i scroll if too much content ? then add overflow:auto;
</div>
</body>
You can set .main to position: absolute;, then use bottom: 0; left: 0; right: 0; to stretch it to all sides.
html,body {
height:100%;
margin:0;
background:red;
}
#main {
position: absolute;
bottom: 0;
top: 30px;
right: 0;
left: 0;
background:yellow;
}
h1 {
margin:0;
}
https://jsfiddle.net/841f9z5b/
Using viewport units we can get the desired div cover
html,body {
height: 100vh;
margin:0;
background:red;
}
#main {
height: 80vh;
background:yellow;
}
h1 {
margin:0;
height:20vh;
}
http://codepen.io/nagasai/pen/zBqQLq
You can use CSS calc to set your div height dynamically.
This will work with IE9 and above (so pretty much covers all modern browsers)
<style >
html,body {
height:100%;
margin:0;
background:red;
}
#main {
height: calc(100% - 37px); /* Height of header subtracted*/
background:yellow;
}
h1 {
margin:0;
}
</style>
<body >
<div>
<h1>Header</h1>
</div>
<div id="main">
Adjust the height
</div>
</body>
I am building a template which has a fixed header and a fixed side bar on the left. My issue is that when I shorten the window and scroll horizontally, the fixed div overlaps the adjacent '.content'.
I don't want the fixed '.sidebar1' to overlap '.content' div when I scroll horizontally. How do I fix this?
html,body
{
margin: 0;
padding: 0;
width:100%;
height:100%;
}
.header
{
width:100%;
height:46px;
position:fixed;
top:0;
background:blue;
}
.page_wrap
{
width:1040px;
display:block;
margin:70px auto 0;
background:purple;
}
.content
{
width:500px;
height:1060px;
display:inline-block;
background:red;
color:white;
margin:5px;
vertical-align:top;
margin-left:270px;
}
.sidebar1
{
display:inline-block;
width:250px;
height:500px;
position:fixed;
top:70px;
background:pink;
margin:5px;
vertical-align:top;
}
.sidebar2
{
display:inline-block;
width:250px;
background:pink;
margin:5px;
vertical-align:top;
}
.footer
{
width:1040px;
height:50px;
margin: 20px auto 0;
text-align:center;
background:magenta;
}
<!DOCTYPE HTML>
<html>
<head>
<title>Temp</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="temp.css">
</head>
<body>
<div class="header">
Header Content
</div>
<div class="page_wrap">
<div class="sidebar1">
sidebar 1
<div class="test"></div>
</div>
<div class="content">
Article Content
</div>
<div class="sidebar2">
sidebar 2
</div>
</div>
<div class="footer">Footer</div>
</body>
</html>
The reason for this is that fixed technically makes it take up no space on the page.
I noticed you have fixed width and height on your content, which is probably your first problem. Fixed width on large containers is typically a bad idea, as it breaks everything else on your page, or prevents it from displaying the way you want.
The end result should look something like:
.content{
width:500px;
height:1060px;
margin-left:270px;
display:inline-block;
background:red;
color:white;
margin:5px;
vertical-align:top;
}
If you need it to scroll horizontally for some reason, then I would say set position:fixed; on the div.content and add a property to your HTML wrap="off" and see if that does what you want it to.
Hopefully this helped. Cheers.
I hope I understood your question
Check https://jsfiddle.net/LeoAref/47p6r6hq/
<header>Header</header>
<aside>Side</aside>
<section>
<div class="wide">
My Wide Content
</div>
</section>
CSS
header {
height: 30px;
line-height: 30px;
background: red;
color: #fff;
text-align: center;
position: fixed;
top: 0;
width: 100%;
left: 0;
}
aside {
top: 30px;
bottom: 0;
width: 300px;
background: blue;
color: #fff;
text-align: center;
position: fixed;
left: 0;
}
section {
top: 30px;
bottom: 0;
left: 300px;
right: 0;
background: #000;
color: #fff;
text-align: center;
position: fixed;
overflow-x: scroll;
}
.wide {
color: #000;
width: 1500px;
background: yellow;
height: 50px;
}
I have a site with a google map canvas on it. It has a header, a footer, and a side panel on each side, a container div and a map canvas div.
The container div contains the side panels and the map-canvas div. My problem is that I cannot get the container div and all divs it contains to stretch to the contents of the browser window vertically.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css"/>
</head>
<body>
<header id="header"></header>
<div id="container" >
<div id="panel"></div>
<div id="panel2"></div>
<div id="map-canvas"></div>
</div>
<footer id="footer"></footer>
</body>
</html>
CSS
#container{ height: 100% auto;min-height:500px; width:100% auto;z-index:2;overflow:auto;}
#map-canvas { width:100% auto; height: 100% auto; min-height:500px; margin: 0px; z-index:3;padding: 0px; font-family: NotoSans, Helvetica, Arial; }
#panel { background-color: #F0F0F0 ; height:100% auto;width:200px; z-index:3;min-height:500px; float:left; }
#panel2 { background-color: #F0F0F0 ; height:100% auto;width:200px; z-index:3;min-height:500px; float:right; }
#header { background-color: #F0F0F0 ; width:100%; min-width:1000px; z-index:3;height:100px;}
#footer { background-color: #F0F0F0 ; width:100%; z-index:4;min-width:1000px;height:100px;}
html, body{ height:100%;width:100%; margin: 0px; z-index:2;padding: 10px; font-family: NotoSans, Helvetica, Arial; }
I'm not sure what you want, but this should work quite well, I think.
But be sure you also set media queries for width and height to keep the page responsive when visited on smaller screen (eg. phone).
<!DOCTYPE html>
<html>
<head>
<style>
#wrapper {
position: fixed;
left: 0; right: 0; top: 0; bottom: 0;
}
#header, #footer {
position: absolute;
width: 100%;
height: 100px;
background-color: #F0F0F0;
}
#header {top: 0;}
#footer {bottom: 0;}
#container {
position: absolute;
top: 100px;
bottom: 100px;
width: 100%;
overflow: auto;
}
#panel, #panel2 {
background-color: #CCC;
width: 200px;
min-height: 500px;
float: left;
}
#panel2 {
float: right;
}
#map-canvas {
min-height: 500px;
overflow: auto;
}
</style>
</head>
<body>
<div id="wrapper">
<header id="header"></header>
<div id="container" >
<div id="panel"></div>
<div id="panel2"></div>
<div id="map-canvas"></div>
<div style="clear:both"></div>
</div>
<footer id="footer"></footer>
</div>
</body>
</html>
I'm learning CSS and I tried to create a simple layout.
I set the "header" to have a width of 100%, the "left" to have a width of 20% and the "right" 80%. But the width of the header is greater than the total width of the left and the right. Why is that and how to fix it?
div {
border-radius: 10px;
}
#header {
z-index: 1;
background-color: #80B7ED;
height: 50px;
width: 100%;
position: fixed;
}
.left {
background-color: #5A9DE0;
height: 400px;
width: 20%;
float: left;
position: relative;
}
.right {
background-color: #BFD9F2;
height: 400px;
width: 80%;
float: right;
position: relative;
}
#footer {
background-color: #80B7ED;
clear: both;
height:70px;
}
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<title></title>
</head>
<body>
<div id="header">
</div>
<div class="left">
</div>
<div class="right">
</div>
<div id="footer">
</div>
</body>
</html>
Edit
Thanks to your answers and to some reading I get now that the problem is the margin of the body section. When I use body {margin: 0;} the "left" plus the "right" take a bigger place in the page and the "header" takes a smaller place, so their widths are equal.
Another solution with the same result is adding a "container" div around everything with "left: 0; right: 0; position: absolute;".
I understand why these solutions make the "left" plus the "right" bigger (so they take the whole page), what I don't get is why the "header" is suddenly smaller. If the fixed "header" is out of the regular flow, why changing the margin of the body influeces it?
body {
margin: 0;
}
div {
border-radius: 10px;
}
#header {
z-index: 1;
background-color: #80B7ED;
border-top-left-radius: 0;
border-top-right-radius: 0;
top: 0;
height: 50px;
width: 100%;
position: fixed;
}
.left {
background-color: #5A9DE0;
height: 400px;
width: 20%;
float: left;
position: relative;
}
.right {
background-color: #BFD9F2;
height: 400px;
width: 80%;
float: right;
position: relative;
}
#footer {
background-color: #80B7ED;
clear: both;
height:70px;
}
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<title></title>
</head>
<body>
<div id="header">
</div>
<div class="left">
</div>
<div class="right">
</div>
<div id="footer">
</div>
</body>
</html>
Thanks
When using percentage widths the margin, padding and border are not included in the calculation. So you want to be sure all of those are set to 0 on the corresponding elements.
margin: 0;
padding: 0;
border: none;
Alternatively, you could use the box-sizing property which will make the calculation include padding and border. Then you would only have to account for the margins elsewhere.
box-sizing: border-box;
Here you go:
body{
margin:0px;
}
div {
border-radius: 10px;
}
#wrapper {
padding: 0%;
}
#wrap {
float: left;
position: relative;
width: 100%;
}
#header {
position:fixed;
width:inherit;
z-index:1;
padding:0px;
height:50px;
border-radius:10px;
background-color: #80B7ED;
}
.left {
background-color: #5A9DE0;
height: 400px;
width: 20%;
float: left;
position: relative;
}
.right {
background-color: #BFD9F2;
height: 400px;
width: 80%;
float: right;
position: relative;
}
#footer {
background-color: #80B7ED;
clear: both;
height:70px;
}
<html>
<body>
<div id="wrapper">
<div id="wrap">
<div id="header"></div>
</div>
</div>
<div class="left"></div>
<div class="right"></div>
<div id="footer"></div>
</body>
</html>
See here jsfiddle
EDIT:
If you wish to add a margin, I'd suggest you add a variable margin, for instance 2% or 3%, and then you substract that quantity from the left column, the right column, or both. And then you set the width of the #wrapp to be 100-2*x %, where x is the amount of margin you added.
Another way is to use overflow: hidden; for parent div and set width:100%; for the child element. This way, more width will be hidden.