Why the container is the outside of body?
I want to content have 100% width of all body, not body and header.
<!DOCTYPE html>
<html>
<head>
<title>dsfsd</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="styl.css">
</head>
<body>
<div id="doc">
<header class="topbar"></header>
<div class="container"></div>
</div>
</body>
</html>
This is my css:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
width: 100%;
height: 100%;
}
#doc {
width: 100%;
height: 100%;
background: #f4f4f4;
}
.topbar {
width: 100%;
height: 48px;
background: #e0e0e0;
}
.container {
margin: 0 auto;
width: 960px;
height: 100%;
background: red;
}
Please, help mi with this problem. :)
If you want your container width to be the width of the body change .container to width:100%; instead of giving it a px width. If that is what you are asking.
Related
Desired layout:
So I have this layout which should be centered and should not exceed 1440px, it is split in 2 parts, let's call them 'sider' and 'content'. sider is max-width: 560px and container is max-width: 880px, together 1440px.
Makes sense right? Content can be infinitely long AND scrollbar ABSOLUTELY has to be on the side of the screen.
So the million dollar question is how do I center these guys?
Here is a replicated, simplified code of my layout: https://codepen.io/andrisladuzans/pen/yLOajrX
HTML:
<div class="content-body">
<div class="sider-container">
<div class="sider-content">
sider
</div>
</div>
<div class="content-container">
<div id="populate" class="content">
</div>
</div>
</div>
CSS:
body{
padding:0px;
margin:0px;
}
.content-body{
background-color: skyblue;
height: 90vh;
width:100%;
overflow: hidden;
display:flex;
}
.sider-container{
background-color: pink;
width:40%;
height: 100%;
overflow:scroll;
display:flex;
justify-content:flex-end;
}
.content-container{
background-color: #ddd;
width:60%;
height:100%;
overflow:scroll;
}
.sider-content{
background-color:magenta;
height: 100%;
width: 100%;
max-width: 560px;
}
.content{
background-color: lime;
width: 100%;
max-width: 880px;
}
JS helper:
const content = document.getElementById("populate")
const populate = () => {
for(let i = 0; i<50; i++){
const textElement = document.createElement("div");
textElement.className = "textElement";
textElement.innerText = 'some text';
content.appendChild(textElement)
}
}
populate();
The problem with my approach is that, on larger screens, you can clearly tell that one side is growing larger than the other and is not centered.
edit:
just realised, stackoverflow, has exact same layout i'm looking for.
solution:
a bit hacky, but here's what i finally managed to come up with (not responsive) https://codepen.io/andrisladuzans/pen/MWyjxLY
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
/>
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
body {
padding: 0px;
margin: 0px;
height: 100%;
}
.content-body {
background-color: skyblue;
width: 100%;
height: 100vh;
overflow: hidden;
}
.container {
background-color: pink;
display: block;
width: 100%;
height: 100%;
overflow: scroll;
}
.inner-wrapper {
max-width: 1000px;
margin: 0 auto;
min-height: 100%;
border: 1px solid green;
display: flex;
position: relative;
}
.sider-container {
position: fixed;
z-index: 1;
background-color: magenta;
height: 100vh;
overflow: scroll;
width: 300px;
}
.sider-content {
background-color: magenta;
}
.content-container {
background-color: #ddd;
border: 1px solid midnightblue;
min-height: 100%;
width: 100%;
display: flex;
}
.content-spacer {
width: 300px;
height: 100%;
flex-shrink: 0;
}
.content {
background-color: lime;
flex: 1;
margin-left: auto;
}
</style>
</head>
<body>
<div class="content-body">
<div class="container">
<div class="inner-wrapper">
<div class="sider-container">
<div id="spacer" class="sider-content"></div>
</div>
<div class="content-container">
<div class="content-spacer"></div>
<div id="populate" class="content"></div>
</div>
</div>
</div>
</div>
<script>
const content = document.getElementById("populate");
const spacer = document.getElementById("spacer");
const populate = (element, text) => {
for (let i = 0; i < 150; i++) {
const textElement = document.createElement("div");
textElement.className = "textElement";
textElement.innerText = text;
element.appendChild(textElement);
}
};
populate(spacer, "spacer");
populate(content, "content");
</script>
</body>
</html>
The problem with my approach is that, on larger screens, you can clearly tell that one side is growing larger than the other and is not centered.
Not in my experience. At least from what I can tell from your codepen, everything works like you'd expect. Here is an image that shows that when I expand the window way past 4K size the container is still perfectly centered. Perhaps there is something on your browser or local machine causing a strange issue. Have you tried viewing your code on a different browser/computer?
I am trying to create a sticky footer but I'm getting empty space above and below my header & footer.
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
header {
background-color: orange;
position: relative;
height: 400px;
width: 100%;
color: white;
text-align: left;
}
footer {
background-color: #202020;
color: white;
position: absolute;
width: 100%;
height: 60px;
bottom: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Porfolio</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<header>
<h1>header</h1>
<p>header</p>
</header>
<div class="wrapper">
content
</div>
<footer>
footer
</footer>
</body>
</html>
What is the best way to create a sticky footer?
Can anyone explain why I've got this space appearing above header & below footer when I have content (h1 p) in in my header section.
For the header gap, your h1 and p tags have a default padding and margin, you may want to remove them or reduce them to your liking
h1, p {
padding: 0;
margin: 0;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
h1,p {
padding: 0;
margin: 0;
}
header {
background-color: orange;
position: relative;
height: 400px;
width: 100%;
color: white;
text-align: left;
}
footer {
background-color: #202020;
color: white;
position: absolute;
width: 100%;
height: 60px;
bottom: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Porfolio</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<header>
<h1>header</h1>
<p>header</p>
</header>
<div class="wrapper">
content
</div>
<footer>
footer
</footer>
</body>
</html>
A "sticky" div can be achieved using position: fixed; in your footer CSS. Fixed means that the on-screen position will never change. Or rather you should follow the instructions posted there.
Concerning the space, it is probably because of the default styles applied to h1. Use a debugger to see those default styles and override them with your custom css.
Firefox and Chrome have built in debuggers that also let you view styles and are very efficient for debugging. Usually right click > "inspect element" then go for the CSS tab which lets your select and see styles applied to elements.
In your example, you are not "resetting" the h1 and p tags. By default these elements have some extra margin.
Try adding the following code to your css.
h1, p {
margin: 0;
}
Also check out the HTML5 CSS Sticky Footer.
you may use flex prperties
.wrapper may scroll, header & footer are sticky
/* demo purpose */
.wrapper:hover:before {
content:'test';
display:block;
height:1000px;
}
/* end demo purpose*/
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
body {
display:flex;
flex-flow:column;
}
header {
background-color: orange;
position: relative;
width: 100%;
color: white;
text-align: left;
}
footer {
background-color: #202020;
color: white;
width: 100%;
height: 60px;
bottom: 0;
}
.wrapper {
flex:1;
overflow:auto;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Porfolio</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<header>
<h1>header</h1>
<p>header</p>
</header>
<div class="wrapper">
content
</div>
<footer>
footer
</footer>
</body>
</html>
or just footer is sticky ?, needs an extra imbrication
/* demo purpose */
.wrapper:hover:before {
content:'test';
display:block;
height:1000px;
}
/* end demo purpose*/html,
body {
height: 100%;
margin: 0;
padding: 0;
}
body, main {
display: flex;
flex-flow: column;
}
header {
background-color: orange;
position: relative;
color: white;
text-align: left;
}
footer {
background-color: #202020;
color: white;
height: 60px;
bottom: 0;
}
.wrapper, main {
flex: 1;
}
main {
overflow: auto;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Porfolio</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<main>
<header>
<h1>header</h1>
<p>header</p>
</header>
<div class="wrapper">
content
</div>
</main>
<footer>
footer
</footer>
</body>
</html>
footer {
background-color: #202020;
color: white;
//replace absolute with fixed for sticky footer (as in, it sticks at the bottom.)
position: fixed;
width: 100%;
height: 60px;
bottom: 0;
}
I saw this comment you posted on another answer:
If desktop only, then I would go with fixed positioning; however, iOS has problems rendering fixed positioning at times. – SergeantHacker
Try removing height 100% from body and html.
Can someone explain me why the first code does result in a fixed footer with a small margin on the right as I used an extra 'div' but that without this as seen in the second code it doesn't show a margin on the right? Thanks!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
body {
width: 100%;
margin: 0px auto;
}
.mymargin {
clear: both;
position: fixed;
bottom: 0px;
text-align: right;
width: 100%;
background-color: fuchsia;
}
footer {
margin-right: 20px;
}
</style>
</head>
<body>
Look in the right corner below!
<div class="mymargin">
<footer>
fixedfooterwithmargin-ontheright
</footer>
</div>
</body>
</html>
Second code without an extra div.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
body {
width: 100%;
margin: 0px auto;
}
footer {
clear: both;
position: fixed;
bottom: 0px;
text-align: right;
width: 100%;
background-color: fuchsia;
margin-right: 20px;
}
</style>
</head>
<body>
Look in the right corner below!
<div class="mymargin">
<footer>
fixedfooter NO hmargin-ontheright
</footer>
</div>
</body>
</html>
Try right instead of margin-right:
footer {
clear: both;
position: fixed;
bottom: 0px;
text-align: right;
width: 100%;
background-color: fuchsia;
right: 20px;
}
jsfiddle: http://jsfiddle.net/ashishanexpert/3eFPt/
Your footer tag is already taking 100% of the width.. So margin will be out of it.
It worked in the first case because you gave the width to the parent. so margin on the child worked. try to add 100% to footer in first case and even that wont work as required.
I'd like to create a layout that acts like a titlebar from iphone:
I tried to put together the following example, but I'm not sure how to get the middle column to expand in width so it uses all left over space. I can do this in javascript at runtime, but wondering if there's a css solution. Here it is:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<style type="text/css">
html, body {
margin: 0px;
padding: 0px;
}
#parent {
background-color: #eee;
width: 100%;
}
#colLeft {
background-color: #ff8b8b;
height: 48px;
display: inline;
}
#colMiddle {
background-color: #c9ffc3;
height: 48px;
display: inline;
text-align: center;
}
#colRight {
background-color: #c3d0ff;
height: 48px;
display: inline;
}
</style>
</head>
<body>
<div id="parent" style="width:100%">
<div id="colLeft">left</div>
<div id="colMiddle">title</div>
<div id="colRight">right</div>
</div>
</body>
</html>
Thank you
A simpler way to approach this is to use an HTML structure like this:
<div id="parent" style="width:100%">
<div id="colLeft">left</div>
title
<div id="colRight">right</div>
<div>
Float the left and right divs to the appropriate sides and set the text align on the parent to center. Any styles from the middle div for text, etc can be applied to the parent.
I'm a bit late in the answer, but see if this is more like what you need, without the need to sacrifice the middle <div>:
You'll have to float the 3 columns and make the inner column have a 100% width. Then, setting the inner column's margin (based on left and right columns' widths), you achieve the result.
Have a look at this fiddle: http://jsfiddle.net/fabio_silva/d7SFJ/
The HTML/CSS:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<style type="text/css">
html, body {
margin: 0px;
padding: 0px;
}
#parent {
background-color: #eee;
width: 100%;
}
#colLeft {
background-color: #ff8b8b;
height: 48px;
width: 100px;
float: left;
}
#colMiddle {
height: 48px;
text-align: center;
float: left;
width: 100%;
margin-left: -100px; /* negative colLeft width */
margin-right: -150px; /* negative colRight width */
}
#colMiddleInner
{
margin-left: 100px;
margin-right: 150px;
height: 48px;
background: #c9ffc3;
}
#colRight {
background-color: #c3d0ff;
height: 48px;
width: 150px;
float: left;
}
</style>
</head>
<body>
<div id="parent" style="width:100%">
<div id="colLeft">left</div>
<div id="colMiddle">
<div id="colMiddleInner">
title
</div>
</div>
<div id="colRight">right</div>
</div>
</body>
</html>
You need to define the widths...
#colLeft {
background-color: #ff8b8b;
height: 48px;
width: 50px
display: inline;
}
#colMiddle {
background-color: #c9ffc3;
height: 48px;
display: inline;
width: auto;
text-align: center;
}
#colRight {
background-color: #c3d0ff;
height: 48px;
width: 50px;
display: inline;
}
Note: default value for width is auto.
I am trying to work on a new project using Twitter's Bootstrap framework, but I am having an issue. I want a full body background, yet the background seems to be limited to the height of the container div. here is the HTML/CSS code:
<!doctype html>
<html lang="en">
<head>
<meta charset='UTF-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.3.0/bootstrap.min.css">
<title>Bootstrap Issue</title>
<style>
body { background: black; }
.container { background: white; }
</style>
</head>
<body>
<div class="container">
<h1> Hello, World!</h1>
</div>
</body>
</html>
How can I get the body to take up the entire screen?
You need to either add this:
html { background: transparent }
Or, set the "page background" (background: black) on html instead, which is fine to do.
Why? Inside Bootstrap, there's this:
html,body{background-color:#ffffff;}
(bear in mind the default background value is transparent)
For more information on why this matters, see: What is the difference between applying css rules to html compared to body?
Note that this is no longer an issue with Bootstrap 3+.
Set the height of html and body to be 100% in the CSS.
html, body { height: 100%; }
Then it should work. The problem is that the height of body is automatically calculated to be the height of the contents, rather than the height of the whole screen.
/* here is a pure CSS solution */
<style type="text/css">
html, body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
#full-screen-background-image {
z-index: -999;
min-height: 100%;
min-width: 1024px;
width: 100%;
height: auto;
position: fixed;
top: 0;
left: 0;
}
#wrapper {
position: relative;
width: 800px;
min-height: 400px;
margin: 100px auto;
color: #333;
}
a:link, a:visited, a:hover {
color: #333;
font-style: italic;
}
a.to-top:link,
a.to-top:visited,
a.to-top:hover {
margin-top: 1000px;
display: block;
font-weight: bold;
padding-bottom: 30px;
font-size: 30px;
}
</style>
<body>
<img src="/background.jpg" id="full-screen-background-image" />
<div id="wrapper">
<p>Content goes here...</p>
</div>
</body>
<style>
body { background: url(background.png); }
.container { background: ; }
</style>
this works for a background image if you want it
best solution would be
.content{
background-color:red;
height: 100%;
min-height: 100vh;
}
its automatically take veiwport height(vh) in bootstrap.