I'm trying to use a side panel with a width of 20% and a height of 100% so that they will re-size depending on browser width and height etc. I'm having a problem with the height (100%) part of the CSS, it doesn't seem to fit the entire height of the browser window though - it just displays 100% of what's in the side panel.
How can I make the side panel reach the bottom of the page no matter how much content is inside of it?
#sidebar{
float:left;
position: relative;
width: 20%;
height: 100%;
background-color: red;
}
Height 100% is always a pain.
Make sure that, html, body also have height: 100% and any div that's wrapping it.
When you set something with percentages, you must always consider "percent of what?" It's always the parent of the element. So what is the parent set to? If there is no defined height in units for the parent, percentage has no reference.
I had the same problem on a project I was working on, I fixed it thus:
#sidebar{
min-height:100%;
height:auto !important;
height: 100%;
//add other styling needed
}
Related
First off, here is a JSFiddle that represents the issue.
I am trying to have a "container" id that is the size of the entire viewport. This is so all div items in #container fit inside the page without scrolling. I assumed thats what height: 100% in html, body, and #container would do.
It seems though, that the .thirdwidth elements height is that of the full viewport, and is not just expanding to the bottom of the #container div (if you inspect the element, it appears that the .thirdwitdh elements go outside the #container)
Does anybody know why this is happening? I would like to be able to have all Sections 0-3 fit on the page without scrolling.
To achieve 100% viewport height you can try 100vh, but why are you placing it's position to absolute.
body {
margin:0;
padding:0;
}
#container {
height: 100vh;
width: 100%;
position:relative;
overflow:hidden;
}
Thanks to #Abbr for this answer (thought I would post a standalone answer so it's not hidden within the comments)
Due to the fact that the gameinfo id is 20% of the parent div, setting the .thirdwidth columns to 100% height made the entire page 120%
Changing the height of the .thirdwidth in my CSS to 80% fixed it!
I need help making my image take up no width on the HTML. What I mean by this is when you shrink the width size of the window, I don't want the image affecting the horizontal slider. I would think overflow:hidden; would work but the right side of the image takes up space on the HTML document.
You could add max-width: 100% to the img element. In doing so, the img will never take up more than 100% of the width of the parent element.
img {
max-width: 100%;
}
Alternatively, you could also use max-width: 100vw (which is 100% of the browser width's width).
img {
max-width: 100vw;
}
Use a width: 50%; instead of px. Play around with which % value best corresponds to your image width. That way the image will automatically adjust to the browser windows size.
I have to fit an iframe in screen height. Obviously, I wanted 100% as in width but, since that doesn't work, I used 100vh.
But vh like vw is not exactly 100%.
In my laptop through chrome while the 100% width renders perfectly without the need for a horizontal scroll bar, vw has about a centimeter extra.
vw and vh stand for viewport width and viewport height respectively.
The difference between using width: 100vw instead of width: 100% is that while 100% will make the element fit all the space available, the viewport width has a specific measure, in this case the width of the available screen, including the document margin.
If you set the style body { margin: 0 }, 100vw should behave the same as 100% (for an element that is a child to body).
Additional notes
Using vw as unit for everything in your website, including font sizes and heights, will make it so that the site is always displayed proportionally to the device's screen width regardless of it's resolution. This makes it super easy to ensure your website is displayed exactly the same in both workstation and mobile.
You can set font-size: 1vw (or whatever size suits your project) in your body CSS and everything specified in rem units will automatically scale according to the device screen, so it's easy to port existing projects and even frameworks (such as Bootstrap that already uses rem as unit for everything) to this concept.
Havenard's answer doesn't seem to be strictly true. I've found that vw fills the viewport width, but doesn't account for the scrollbars. So, if your content is taller than the viewport (so that your site has a vertical scrollbar), then using vw results in a small horizontal scrollbar. I had to switch out width: 100vw for width: 100% to get rid of the horizontal scrollbar.
You can solve this issue be adding max-width:
#element {
width: 100vw;
height: 100vw;
max-width: 100%;
}
When you using CSS to make the wrapper full width using the code width: 100vw; then you will notice a horizontal scroll in the page, and that happened because the padding and margin of html and body tags added to the wrapper size, so the solution is to add max-width: 100%
#Havenard's answer provides the perfect explanation for the question. Adding to that, this provides a visual representation of the difference.
You'll be able to notice the key difference between 100vw and 100% when you have a site with scrollbars and an element that is supposed to fit the entire width of the screen.
Option 1
Below is an example of the same.
All i'm doing in the code below is changing the width of <h1> tag from 100vw to 100% when you hover over it.
body{
/* margin: 0; */
}
.scroll{
height: calc(110vh);
}
h1{
width: 100vw;
/* width: 100%;*/
text-align:right;
outline: 5px solid black
}
h1:hover{
width: 100%;
}
h1:before{
content: "100vw "
}
h1:hover:before{
content: "100% "
}
<div class = "scroll">
<h1>Width</h1>
</div>
If you run the above code snippet and hover the text, you'll notice 2 things:
the horizontal scrollar disappears
the entire text will be visible
to you
Note: after running the above snippet, you can play around with above code in browser devtools to see how it affects the elements
Option 2 (Chrome and Edge)
.scroll{
height: calc(110vh);
display: flex;
align-items: baseline;
}
h1{
width: 100vw;
/* width: 100%; */
text-align:right;
outline: 10px solid black
}
<div class="scroll">
<h1>Test</h1>
</div>
Another way to visually see the difference in your own project is by setting a display:flex style to an element with 100vw.
When you highlight this elements in browser devtools, You can notice the a leftward point arrow at the right end of the element. Also you can see than the shading of the highlighted elements spans across the scroll-bar, indicating that it is considering the entire screen-width (including scroll-bar width)
Other questions, that address similar issue are:
100vw causing horizontal overflow, but only if more than one?
CSS Units - What is the difference between vh/vw and %?
Prevent 100vw from creating horizontal scroll
I'm building some tests around height:100%.
On the THIS page you can notice the blue area doesn't stretch its height with the page content, even though it is assigned to have the CSS style of:
height:100%;
Any help on solving or trying to understand this behaviour?
Set height: auto on your body element,
body {
width: 100%;
font-family: sans-serif;
height: auto;
}
Update
Ok, wasn't aware it needs to be 100% despite lesser content.
What you can do is,
give your body some height (say 1000px). And then the 100% on your section will expand to 1000px.
PS: min-height won't work. You'll need to provide a height in px or em.
Although, I'm not very sure on why elements cant figure out 100% of 1000px and NOT 100% of 100%
If you want that section to always be 100% height, you could use min-height: 100% instead of height: 100%. If not, you'll have to give the parent a height (like the html), and then use height: 100%.
the theory behind the behaviour is that if you want to have an element filling the 100% height of a window, you have to make sure that parents of such element also fill 100% of the browser window .
The idea is clear, if you are setting 100% height, you have to ask: 100% of what exactly?
The answer is of a parent.
Of course, this applies to elements without the position: absolute or position: fixed which are not in the "flow" of the document.
An illustration of the problem is very clearly seen in my fiddle: http://jsfiddle.net/AVKnJ/
I hope it enlightens a bit.
EDIT:
is this the desired behaviour?
you indeed have to use height: 100% for containers (html, body) and min-height: 100% for the elements you expect to exceed the height of the window.
http://jsfiddle.net/7jDFD/15/
http://featuredfotografer.com/
The .Codemirror div in combination with the #header div takes up more height than the height of the browser. How can I make them have a combined height of 100% of the browser window so I have no scrollbar?
making combined height equal to the height of the browser window
Just add this snippet of code. It will set your content to 100% of browser window.
body,html {
height: 100%;
}
Also you can check this.
I would take a different approach to this. You can make a small 1px high and 30px wide image that looks like the background behind the line numbers and apply it to the body with a repeat-y and aligned left. Remove the height:100% on the .CodeMirror div
Alternately you can
add <div class="CodeMirror-gutter bodyGutter"></div> just before your closing </body> tag and add this to your CSS, and also again remove the height:100% on the .CodeMirror div:
.bodyGutter {
height: 100%;
z-index: -1;
width: 20px;
left: -8px;
}
This is also adding a fake gutter to your body and pushing it to the background to give the fake appearance of 100% height.