I want the content to take the full height of the browser window, but not beyond.
When using 100vh as the container height, I can see the vertical scrollbar appearing.
.container {
height: 100vh;
border: 3px solid lightsteelblue;
border-radius: 10px;
}
What could be the issue?
EDIT:
more detailed code:
CSS
html, body {
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
}
.container {
height: 100vh;
margin: 0px;
padding: 0px;
}
.page_content {
height: 85vh;
width: 95vw;
border: 3px solid lightsteelblue;
border-radius: 10px;
overflow-y: auto;
margin: 0 auto;
}
.footer {
height: 14vh;
width: 95vw;
margin: 0px auto;
padding: 0px;
}
HTML
<html>
<body>
<div class="container">
<div class="page_content">
...
</div>
<div class="footer">
...
</div>
</div>
</body>
</html>
By default body and html are assigned to margin or padding to some pixels. Try using following code.
1vh = 1% of veiwport height
100vh = 100% of height.
So never calculate height - 3px. like this
body,html {
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
}
The issue is that you have a border with it, and like padding, you have to add it to your height.
Either you use this :
.container {
height: calc(100vh - 3px);
}
Or this :
.container {
height: 100vh;
border: 3px;
box-sizing: border-box;
}
There is a user agent stylesheet that gets added to any web document, it's nothing but default set of style that each browser applies to the documents being viewed, however these rules have the a very lower precedence order.
Of course the author can over ride these rules, and they do very often.
As of today, google chrome, adds 8px margin to your document if not added or over written by the author.
So let's consider you added a div in your entire HTML document called .container in your case.
You may try doing something like this.
body {
margin: 0;
height: 100vh;
}
.container {
height: 100%;
//if you want to add border to this container,
border: 1px solid cyan;
box-sizing: border-box;
}
Further if you have any other divs inside the container, they would take advantage of .container class 100vh value. You can assign 70% height to .page-content and 30% height to .footer div.
.page-content {
height: 70%
border: 1px solid aquablue;
box-sizing: border-box;
}
.footer {
height: 30%;
}
use
body{
margin :0px;
}
and
.container {
height: 100vh;
border: 3px;
box-sizing: border-box;
}
body {
margin: 0;
}
.container {
height: 100vh;
border: 3px solid lightsteelblue;
border-radius: 10px;
box-sizing: border-box;
}
This did the trick. See and test it here: https://jsfiddle.net/ddan/jsenLgre/
Came across same scenario, some auto margins in browser causesthe vertical scroll bar to appear. Very simple workaround I came across is to use 99vh instead of 100vh
.container {
height: 99vh;
border: 3px;
box-sizing: border-box;
}
I tend to encounter this problem alot my solution is a bit unorthodox but here it is
body{
height: 80vh;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
If you write this at the beginning of your codes, your problem will be fixed.
u can remove the scroll bar by overflow-y:hidden; and u should use calc function to remove ur header height example height: 100vh;
calc(100vh -20px) if ur header is 20px height. so u get the 100vh !
Related
I am new to web development and so to Stackoverflow.
I am stuck at changing width to make it responsive.
Below, I have got this example that's meant to be explaining the property background-blend-mode. After I finished with it I wanted to use it as a refresher to previous lessons. I wanted to style it to make it responsive in terms of changing the max and min width properties.
div {
width: 280px;
height: 140px;
padding: 30px;
margin: 10px;
display: inline-block;
background: green url(https://mdn.mozillademos.org/files/13090/colorful-heart.png) no-repeat center 0;
background-size: contain;
}
.multiply {
background-blend-mode: multiply;
}
<html>
<div>
</div>
<div class="multiply">
</div>
</html>
What happens is when the viewport's width (at Chrome) changes to less than 740px the divs display as block element. When I got to use thebox-sizingproperty to set its value to border-boxit changed the break point to 620px instead of 740px which means that any width under 620px makes the divs still display as block elements.
What I am stuck at is set a responsive viewport for these divs so they are always displayed as inline elements, no matter what viewport's width is.
Thank you
Check this one
div {
width: 280px;
height: 140px;
padding: 30px;
margin: 10px;
display: inline-block;
background: green url(https://mdn.mozillademos.org/files/13090/colorful-heart.png) no-repeat center 0;
background-size: contain;
}
.multiply {
background-blend-mode: multiply;
}
#media only screen and (max-width: 767px) {
body {
text-align: center;
}
div {
width: 48%;
height: auto;
margin: 15px 0;
padding: 13% 0;
}
}
<div></div>
<div class="multiply"></div>
What kind of responsive do you want? Responsive really just means responds to -- the screen size. So the behavior is really up to you. From exactly what I'm seeing you have two options.
Responsive in just the width. This means that as you scale down to smaller than the two block size they'll scale down width wise only. To achieve this you set you max-width to 280px then because you have two objects you want to set the width to 50%. The problem with this is at some point you'll end up with very narrow blocks.
div {
max-width: 280px;
height: 140px;
padding: 30px;
margin: 10px;
display: inline-block;
background: green url(https://mdn.mozillademos.org/files/13090/colorful-heart.png) no-repeat center 0;
background-size: contain;
width: 50%;
}
.multiply {
background-blend-mode: multiply;
}
https://jsfiddle.net/6fjcoxmt/4/
Responsive in aspect radio. The other option is keeping the aspect ratio where you need to use a technique with an pseudo element that holds the parent's aspect ratio. You still need to use the technique from 1. but it gets a bit more complicated. Your element's wrapper will need to control the aspect ratio.
<div>
<div class="inner"></div>
</div>
<div class="multiply">
<div class="inner"></div>
</div>
Notice now .inner was your previous element's visual and the parent div will focus on controlling the height to width ratio:
div {
display: inline-block;
margin: 10px;
max-width: 280px;
position: relative;
width: 50%;
}
div:after {
content: "";
display: block;
padding-bottom: 58.8%;
}
.multiply .inner {
background-blend-mode: multiply;
}
.inner {
background: green url(https://mdn.mozillademos.org/files/13090/colorful-heart.png) no-repeat center center;
background-size: contain;
bottom: 0px;
height: 100%;
margin: 0;
position: absolute;
top: 0px;
width: 100%;
}
https://jsfiddle.net/6fjcoxmt/16/
Try it. I have added some css and media query for responsive.
* {
padding:0;
margin:0;
list-style:none;
}
html {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
*, *:before, *:after {
-moz-box-sizing: inherit;
-webkit-box-sizing: inherit;
box-sizing: inherit;
}
.common {
width: 340px;
height: 200px;
padding: 30px;
margin: 10px;
display: inline-block;
background: green url(https://mdn.mozillademos.org/files/13090/colorful-heart.png) no-repeat center 0;
background-size: contain;
}
.multiply {
background-blend-mode: multiply;
}
#media screen and (max-width:767px){
.common{
width:45%;
height:auto;
margin: 10px auto 10px;
padding: 14%;
}
.wrap{
text-align:center;
}
}
<html>
<div class="wrap">
<div class="common"></div>
<div class="common multiply"></div>
</div>
</html>
I have created a grid and now have problems with max-width. I want to have containers which take up the available width and are restricted by a left and right margin. This containers can contain children. These children may be bigger then the parent container and may be moved with the class .move-to-right-border to the right border to take up full width on the right.
I now have added a max-width to the container, to restrict the width. But now i have the problem that i can't set child elements to take up full width. I tried with 100vw, but width 100vw the scrollbar is included. Has anybody a solution for this problem?
Maybe it gets more clear with this example, comment max-width in and out to see what i want.
.row-right {
box-sizing: border-box;
margin-left: 200px;
margin-right: 100px;
max-width: 700px; /* to see the problem comment max-width in and out */
width: calc(100% - 100px - 200px);
border: 1px solid red;
}
.move-to-right-border {
box-sizing: border-box;
width: calc(100% + 100px);
border: 2px solid blue;
}
http://codepen.io/anon/pen/eJymOL
just use below css
CSS
.row-right p {
text-align: justify;
width : 100%
}
Hope this will help you :)
I think u r after something like this:
.parent{
position: relative;
height: 300px;
padding: 10px 0;
background-color: #99ff99;
text-align: center;
}
.container{
width: 200px;
margin: 0 auto;
height: 100px;
padding: 30px 0;
background-color: #ff9999;
}
.child{
position: absolute;
width: 100%;
height: 50px;
left: 0;
background-color: #9999ff;
}
<div class="parent">
This is parent
<div class="container">
This is container
<div class="child">
This is child
</div>
</div>
</div>
Problem here: http://jsfiddle.net/x8XZ6/3/
HTML
<div id="top"></div>
<div id="content">Why this div is not 100% height? I need this to fill all the way to the start of the footer if content is to little. If content extends beyond the blue footer, it should push the footer down.</div>
<div id="anchored-footer"></div>
CSS
* { margin: 0; padding: 0 }
html { height: 100%; }
body {
position: relative; min-height: 100%;
height: 0;
/* height: 0; interestingly, if height is set to 0, it expands 100% (see also #content margin-bottom) */
/* but I need it to extend up to the blue bar only. */
}
#top {
height: 50px;
background-color: red;
}
#anchored-footer {
position: absolute;
bottom: 0;
height: 50px;
background-color: blue;
width: 100%;
}
#content {
border: 5px solid green; /* because I need this border to go all around the content area */
background-color: yellow;
height: 100%;
/* margin-bottom: -50px; can a negative margin work here? */
}
Can this be achieved without using absolute positioned header?
You DO need to change BODY to height:100%;
working demo
css
* { margin: 0; padding: 0 }
html { height: 100%; }
body {
position: relative; height: 100%;
}
#top {
height: 50px;
background-color: red;
}
#anchored-footer {
bottom: 0;
height: 50px;
background-color: blue;
width: 100%;
}
#content {
border: 5px solid green; /* because I need this border to go all around the content area */
background-color: yellow;
min-height:calc(100% - 110px);
}
*Notice: No position:absolute is used at all.. you don't need it, especially if you want your content to push your footer down.. then definitely don't use absolute.
I would recommend doing the below:
body {
position: relative;
min-height: 100%; /* to fill screen 100% even with less content */
height: 100%; /* to allocate only 100% height */
}
#top {
height: 50px;
background-color: red;
top: 0;
}
#anchored-footer { /* No absolute positioning */
height: 50px;
background-color: blue;
width: 100%;
}
#content {
border: 5px solid green;
background-color: yellow;
min-height: calc(100% - 110px); /* allocate the remaining height except the header + footer + borders and assign as minimum height */
height: auto; /* allow content to expand when height exceeds the min height */
}
Demo | Demo with lot of content
If you ara not worrying about IE8 browsers then you can use calc property to achieve this.
html, body{width:100%;}
#content {
border: 5px solid green;
background-color: yellow;
height:calc(100% - 110px); /* 50px header + 50px footer + 10px border */
}
DEMO
I need create element, that cover whole page except 20px margin on all sides. I try this and it works in webkit browsers and Firefox, but Internet Explorer (10) and Opera have problem with this :-( . Any idea how to solve this?
HTML
<div id="first">
<div id="second">
Hello world!
</div>
</div>
CSS
head, body
{
width: 100%;
height: 100%;
}
body
{
position: absolute;
margin: 0;
background-color: blue;
display: table;
}
#first
{
display: table-cell;
height: 100%;
width: 100%;
padding: 20px;
}
#second
{
height: 100%;
width: 100%;
background-color: white;
}
I'd suggest:
#first {
display: table-cell;
position: absolute;
top: 20px;
right: 20px;
bottom: 20px;
left: 20px;
}
Which will position the element 20px away from each of the sides. However I'd suggest not using display: table-cell; since that requires a parent element to have display: table-row which itself then requires a parent element with display: table.
Also, it looks like you're trying to emulate table-based layouts, if you could list the overall problem you're trying to solve you may get better/more useful answers.
Try a solution like this:
http://jsfiddle.net/cyHmD/
Never use position:absolute and display:table on body - leave those properties as they are since body is your base from where you build the rest of the site - at most use position:relative on body tag. box-sizing changes how the browser box model is calculated - for example instead of calculating 100% width + 20% padding + 20% border = 140% it calculates as 100% width + 20% padding + 20% border = 100%.
This solution will work from IE7 on including IE7.
head, body {
width: 100%;
height: 100%;
margin:0;
padding:0;
}
body {
background-color: blue;
}
#first
{
position:absolute;
width:100%;
height:100%;
padding:20px;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
#second
{
height: 100%;
width: 100%;
background-color: white;
}
How about this? Simply replace required margin with border:
#first
{
display: table-cell;
height: 100%;
width: 100%;
border: 20px solid blue;
background-color: white;
}
I'm a bit of a CSS noob and I was hoping someone here would have the patience to point out the error of my ways.
Basically, I'm creating a mobile web platform and I'm designing a concept "landing page" which will consist of four equally sized rectangular (square on some resolutions) tiles (inspiration drawn from here: http://tinyurl.com/beartss).
Obviously with this application being mobile orientated I've been avoiding fixed widths and heights but can't quite get the same layout as seen in the image I linked. My HTML is laid out as follows:
<div class="page-container">
<div class="tile-1"></div>
<div class="tile-2"></div>
<div class="tile-3"></div>
<div class="tile-4"></div>
</div>
And the current CSS I'm using is...
html, body, .container
{
height: 100%;
min-height: 100%;
}
.page-container
{
margin: 0 auto;
border: 1px solid black;
height: 99%;
min-height: 99%;
width: 99%;
}
.tile-1
{
border: 1px solid black;
height: 48%;
width: 48%;
}
.tile-2
{
border: 1px solid black;
height: 48%;
width: 48%;
}
.tile-3
{
border: 1px solid black;
height: 48%;
width: 48%;
}
.tile-4
{
border: 1px solid black;
height: 48%;
width: 48%;
}
This isn't even remotely near what I'm trying to achieve, and I've come by a rumour that percentage based height is never a good idea, either way, the above CSS gives me this: http://i.imgur.com/nXbcHze.png
Any help would be appreciated, I'm sure I've just missed something with the height.
Normally, block level elements won't appear on the same line as another block level element. So, you need to either float them or change their display to something like inline-block.
http://jsfiddle.net/kyyjg/
You will find that mixing px on your borders with percentages for your dimensions to cause your elements to not take up the right amount of space because of how the box-model works. You might find that adding box-sizing: border-box helpful.
If you're interested in another approach, here's how one might do it using flexbox:
http://jsfiddle.net/LJMdx/4/
html, body {
height: 100%;
}
.page-container {
min-height: 100%;
background: red;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 1%;
}
.page-container div {
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-flex: 1 1 48%;
flex: 1 1 48%;
margin: 1%; /* optional */
border: 1px solid;
}
If you don't want the gaps between the tiles, drop the 1% margin and padding: http://jsfiddle.net/LJMdx/3/
http://caniuse.com/#feat=flexbox
Try float:left. Demo -> is that the solution that your looking for?.
Added a min-width on each the tiles so that the template is the same on any resolution.