I need something like HTML code and css following below. But now browser has showing vertical scroll. How to remove vertical scroll. Code is in the jsFiddile http://jsfiddle.net/jHVc7/
<style type="text/css">
html,body{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
header{
height: 50px;
background: #84ff00;
}
section{
background: #139e7f;
height: 100%;
}
section div{
width: 180px;
float: left;
background: #d0b107;
height: 100%;
}
section aside{
width: auto;
overflow: hidden;
background: #0edb09;
}
</style>
</head>
<body>
<header></header>
<section>
<div>a</div>
<aside>b</aside>
</section>
</body>
Add this in your html,body{ .... }
html,body{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow:hidden;
}
See DEMO http://jsfiddle.net/yeyene/jHVc7/1/
You have 50px height in the header and 100% height for .section
now the total height of your body is 100% + 50px , so you are getting vertical scroll.
You can apply overflow:hidden in body or adjust the height of .section
html,body{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow: hidden;
}
use the following class. This should work.
section{
background: #139e7f;
height:calc(100% - 50px);
}
You can add
overflow: hidden to html,body property
html,body{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow: hidden;
}
Related
This is my code:
The header is in fixed position, and I add a margin and padding zero to body
<body>
<header></header>
<div id="content">
<div id="center"></div>
<div id="a"></div>
</div>
</body>
body {
background-color: gainsboro;
margin: 0;
padding: 0;
}
header {
background-color: black;
width: 100%;
height: 50px;
position: fixed;
top: 0;
}
#content{
margin-left: auto;
margin-right: auto;
margin-top: 60px;
width: 900px;
height: 100%;
}
#a{
background-color: white;
margin-left: auto;
margin-right: auto;
height: 400px;
width: 500px;
border-radius: 2px;
}
Now I want to ask, why is body 60px lower. It should not body always be the top 0?
Here is a picture of this:
body height
The margin-top in your #content is pushing the body down. Please read more on collapsing margins.
I have a wierd problem. I have exactly the same DOM and CSS rendered with React and rendered with pure HTML. However, in React children of the div.container doesn't get the proper height when it's set in %. It works well when it's set with vh or with px, but I can't use those. Any idea why? And how to fix this problem?
div.form label:after, div.wrapper:after, div.container:after {
display: block;
content: '.';
clear: both;
height: 0;
visibility: hidden;
line-height: 0;
padding: 0;
margin: 0;
}
body {
width: 100%;
margin: 0;
min-width: 319px;
min-height: 479px;
background-color:black;
}
div.container {
margin: 0 auto;
width: 100%;
height: auto;
max-height: 1368px;
max-width: 1368px;
min-width: 319px;
min-height: 100%;
position: relative;
background-color:red;
}
nav {
width: 82px;
height: 100%;
height: 100vh;
max-height: 1368px;
float: left;
z-index: 1000;
overflow: hidden;
background-color: #55c7f9;
}
header {
height: 15%;
margin: 0 6%;
float: initial;
position: relative;
width: calc(100% - 80px);
background-color:orange;
}
div.wrapper {
min-height: calc(100% - 62px);
height: auto;
width: calc(100% - 80px);
float: right;
background-color:yellow;
}
div.main {
width: 90%;
height: 100%;
box-sizing: border-box;
margin: auto;
padding-bottom: 10px;
height: calc(100% - 158px);
background-color:green;
}
<body>
<div class="container">
<nav></nav>
<header></header>
<div class="wrapper">
<div class="main"></div>
</div>
</div>
</body>
class is className inside react.
<body>
<div className="container">
<nav></nav>
<header></header>
<div className="wrapper">
<div className="main"></div>
</div>
</div>
</body>
Some advice that might help you..
Add html, along with body.
html, body {
height: 100%;
}
Make sure the div your bundle is being loaded to has height: 100%;. In the case below "root" would need it.
<body>
<div class="root"></div>
<script src="./bundle.js"></script>
</body>
Last case, if you do something like this:
<div>{this.props.children}</div>
Make sure you give this div a className and add it to the list of things that need to be 100%
I have simple layout and I'm trying to expand div's height to given % so I can put later scalled background img using backgound-size.
In example I wanna have div1 expand to 69%.
Why it doesn't work and how to fix it?
Link: https://jsfiddle.net/mc6ecstr/
CSS:
body
{
color: white;
margin: 0px;
padding: 0px;
height: 1080px;
}
#container
{
width: 100%;
height: 100%;
}
#header
{
background-color: blue;
width: 100%;
}
#div1 {
background-color: red;
float: left;
width: 15.67%;
margin-left: 1.5%;
height: 69%; /*doesnt work*/
}
#div2 {
background-color: green;
float: right;
width: 43.17%;
margin-right: 3.6%;
}
HTML:
<body>
<div id="header">Header</div>
<div id="container">
<div id="div1">1</div>
<div id="div2">2</div>
</div>
</body>
You need to give to the body and html and to his parent (#container) height: 100%;
CSS
body, html
{
color: white;
margin: 0px;
padding: 0px;
height: 100%; /* Add this */
}
#container
{
width: 100%;
height: 100%; /* Add this */
}
DEMO HERE
If you know the height of #header you can use calc(...) and absolute positioning to make the container fill the remaining space:
#container
{
width: 100%;
height: 100%;
position:absolute;
top:20px;
left:0px;
height:calc(100% - 20px);
}
In this example I've set the header to a fixed height of 20px, then offset container by the same amount.
Then set #div1's height accordingly to fill 69% of #container.
Fiddle: https://jsfiddle.net/GarryPas/mc6ecstr/2/
I know there have been plenty of questions regarding sticky footers, but I can't seem to get them to work on my page.
Can anyone help me make my footer sticky, not fixed?
My HTML
<div id="container">
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
My CSS
#container {
width: 980px;
min-height: 100%;
margin-left: auto;
margin-right: auto; }
#content {
width: 100%;
min-height: 100%;
margin: 40px 0; }
#footer {
width: 3000px;
min-height: 185px;
background-color: rgb(0,173,239);
margin-left: -1000px; }
I have tried various positions (relative, fixed etc) but it doesn't work. I seem to get my footer fixed and covering content. Any suggestions?
Try this CSS:
body {
min-height: 100%; }
#container {
width: 980px;
min-height: 100%;
margin-left: auto;
margin-right: auto; }
#content {
width: 100%;
min-height: 100%;
margin: 40px 0;
margin-bottom: 290px; }
#footer {
width: 100%;
min-height: 185px;
background-color: rgb(0,173,239);
position: fixed;
bottom: 0;
left: 0;
right: 0; }
I'd like to have my header fixed: header is always at the top of page and my whole content (everything including footer) could be scrolled. Header is 60 px high as you can see below and it's not the problem to make it fixed at the top.
The problem I want to solve (using only CSS) is to have scrollbar starting below these 60 pixels from the top.
As you can see, the bottom of the scrollbar (2. arrow) is actually hidden/moved down. I guess by my problematic 60px.
So it goes like this:
HTML:
<!DOCTYPE html>
<head>
...
</head>
<body>
<header>
...
</header>
<div id="content">
...
</div>
</body>
</html>
CSS:
html, body {
height: 100%;
}
body {
background: #d0d0d0;
overflow-y: hidden;
}
header {
background: #fff;
height: 60px;
width: 100%;
position: fixed;
top: 0;
}
#content {
margin-top: 60px;
height: 100%;
width: 100%;
overflow-y: scroll;
}
What am I missing in my CSS?
Thanks guys.
// Edit as a reply to the forst answer here (to John Grey)
Commentary below your comment:
Here is a jsfiddle how to solve your problem:
http://jsfiddle.net/sTSFJ/2/
Here is the css:
html, body {
height: 100%;
margin: 0px;
padding: 0px;
}
#wrapper {
width: 100%;
height: 100%;
margin: auto;
position: relative;
}
#header {
height: 40px;
background-color: blue;
color: #fff;
}
#content {
position:absolute;
bottom:0px;
top: 40px;
width:100%;
overflow: scroll;
background-color: #fff;
color: #666;
}
Your #content height is equal body height, but you have a header so... Try use this:
html, body {
height: 100%;
}
body {
background: #d0d0d0;
overflow-y: hidden;
}
header {
background: #fff;
height: 5%;
width: 100%;
position: fixed;
top: 0;
}
#content {
margin-top: 5%;
height: 95%;
width: 100%;
overflow-y: scroll;
}
You can solve this using the calc property. That is instead of height 95%, since you don't know if 5% == 60px rather do the following:-
#content {
margin-top: 5%;
height: calc(100%-60px);
height: -webkit-calc(100%-60px); /*For webkit browsers eg safari*/
height: -moz-cal(100%-60px); /*for firefox*/
width: 100%;
overflow-y: scroll;
}