Element using overflow: scroll has scrollbar going off screen - html

html, body {
min-height: 100%;
margin: 0;
padding: 0;
overflow-y: hidden;
}
#sidebar {
background-color: white;
height: 100%;
width: 20%;
float: left;
position: fixed;
box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.5);
padding-bottom: 6em;
overflow-x: scroll;
}
The sidebar has a scroll which moves approximately 50px off the screen, please refer to image provided. I have tried using padding or margin on both body and #sidebar, to no avail.

Because you have no set height on #sidebar's container, 100% height will be auto. The scrollbar will be the size of it's container (#sidebar) so it will just stretch. Try something like this:
#sidebar {
top: 0;
bottom: 0;
}
You could also use window units:
#sidebar {
height: 100vh;
}

Related

Page not taking 100% height of view

I have this css because I have two static navbars with fixed position.
But the #page takes height of its content and not of screen size, so it doesn't scroll.
I already tried height:100vh;
Any solution to make this #page take all the available space in the view so it makes the scroll useful?
#page {
position: relative;
margin-top: 110px;
margin-left: 220px;
padding: 15px 15px 15px 15px;
height: 100%;
overflow: scroll;
}
NAVBARS
.navbar-right{
width: 220px;
left: 0;
top: 0;
margin-top:110px;
position: fixed;
}
.navbar-top{
border-bottom-color: #fe6803 !important;
border-bottom: 5px solid;
position: fixed;
height: 110px;
left: 0;
width: 100%;
}
This will make the page fill out the screen, and subtract the margin above:
#page {
position: relative;
margin-top: 110px;
margin-left: 220px;
padding: 15px 15px 15px 15px;
overflow: scroll;
height: calc(100vh - 110px);
}
In order to make something of 100% height, parent of this element needs to also have a defined height. That includes body and html elements if it is the parent.
So if #page is a div inside another div (let's call it divA) inside body. Then html, body, divA and #page needs to be defined with 100% height.
html, body {
height:100%;
}
#page {
position: relative;
margin-top: 110px;
margin-left: 220px;
padding: 15px 15px 15px 15px;
height: 100%;
overflow: scroll;
}
In JSFiddle
This differs in behavior from width as width is often pre-defined to 100% width whereas the heights are automatic.

How can I add a scrollbar for side panel when the body overflow is set to hidden?

Here's the JSFiddle:
https://jsfiddle.net/stgeqjoL/
html,
body,
#container {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
I have a side panel that will have many divs that will do something when selected.
The body is currently set to hide the overflow, which is making the side panel also hide the overflow, but I want it to scroll.
What do I need to change?
You need to add a height value to the #sidebar, along with overflow: scroll.
Try:
#sidebar {
position: absolute;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.85);
width: 350px;
overflow: scroll;
height: 100vh;
}

HTML background video adjust to screen size that is responsive

I have a problem concerning my HTML background video.
I found some articles on Stack Overflow, and added it to my HTML and CSS.
But it does not seem to work, it either will not become responsive or it messes with my other divs and elements.
I have a picture:
(the container of the video element has background color yellow)
And here is the code:
.container {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
overflow: hidden;
box-shadow: 0px 10px 24px 0px rgba(50, 50, 75, 0.49);
font-size: 0;
background-color: yellow;
margin: auto;
z-index: -1000;
}
.container video {
min-width: 100%;
min-height: 100%;
width: auto;
position: absolute;
height: auto;
max-height: 100%;
width: 100%;
}
As you can see, the video width does not adjust to the screen size. I tried object-fit but this will make it not responsive.
The trick is to make your container height: 0 then apply the aspect ratio of the video as padding-bottom on the container. You get the aspect ratio of the video by dividing the height by the width and multiplying by 100 to get a percentage value. Then position your video to take up the entire space in the container.
The video in my example is 320x176. (176 / 320) * 100 = 55%.
* {margin:0;}
.container {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
height: 0;
overflow: hidden;
box-shadow: 0px 10px 24px 0px rgba(50, 50, 75, 0.49);
font-size: 0;
background-color: yellow;
margin: auto;
z-index: -1000;
padding-bottom: 55%;
}
.container video {
position: absolute;
top: 0; left: 0;
width: 100%;
height: 100%;
}
<div class="container">
<video src="https://www.w3schools.com/html/mov_bbb.mp4" loop autoplay></video>
</div>
If you want the video to always fill 100% width and 100% height of your container, no matter the ratio, then you should go with overflow:hidden, and play with the position top,right,bottom,left attributes if you want to center it.
.container .video{
min-width:100%;
min-height:100%;
overflow:hidden;
}
This did the trick for me what i desired for desktop at least:
.container{
width: auto;
height: 100%;
position: absolute;
bottom: 0px;
top: 0px;
background-color: yellow;
z-index: -1000;
overflow: hidden;
box-shadow: 0px 10px 24px 0px rgba(50, 50, 75, 0.49);
margin: auto;
font-size: 0;
}
.container video{
min-width: 100%;
min-height: 100%;
position: static;
top: 0;
left:0;
height: 100%;
width: 100%;
object-fit: fill;
}
for mobile I will give it a different rule, cause now the video changes aspect ratio (which I desired).

Div fill height of parent div?

I'm trying to get a div to fill the remaining height of a div. Here's my HTML and CSS:
CSS:
* {
padding: 0px;
margin: 0px;
}
#container {
margin: 85px auto 0px auto;
background: #444444;
min-height: 500px;
width: 900px;
}
#topbar {
width: 900px;
height: 85px;
background: #555555;
}
#leftbar {
width: 250px;
height: 100%;
background: #666666;
}
HTML:
<div id="container">
<div id="topbar">
</div>
<div id="leftbar">
</div>
</div>
I expected leftbar to fill the height between the bottom of topbar and the bottom of container, but it's scretching container so that leftbar is 100% of the page height.
You can stretch the leftbar with absolute positioning and setting the top/bottom values:
* {
padding: 0px;
margin: 0px;
}
#container {
position: relative;
margin: 85px auto 0px auto;
background: #444444;
min-height: 500px;
width: 900px;
}
#topbar {
width: 900px;
height: 85px;
background: #555555;
}
#leftbar {
position: absolute;
top: 85px;
bottom: 0;
width: 250px;
background: red;
}
Fiddle:
http://jsfiddle.net/robertp/CQ7pf/
Try adding this to container:
position: relative;
and then add this to leftbar:
position: absolute;
top: 0;
bottom: 0;
Set your left bar to position: relative;
So leftbar should be container's height minus topbar's height. Since container and topbar have hard-coded height values, it follows that leftbar will have to be hard-coded also. It's not the prettiest thing in the world but it's simpler than the alternative, JavaScript.
If container is 500px in height, subtract the height of topbar (85) and container's margin (85) to arrive at a height of 330px. Since container uses min-height, use min-height for leftbar also to allow it to stretch the container if need be. You should also change leftbar's position to relative to render the height of container correctly.
Bottom line:
#leftbar {
position: relative;
min-height: 330px;
}

CSS position absolute doesn't work in IE7

i have the following simple script, but it doesn't work in IE7
<div id="content">
<div id="left"></div>
<div id="right"></div>
<div id="bottom_menus">any text here...</div>
</div>
and CSS
#content
{
margin: 0 auto;
padding: 0;
width: 980px;
background-color: lime;
height: 800px;
overflow: hidden;
position: relative;
}
#left
{
width: 275px;
float: left;
background-color: olive;
margin: 0px 0px -5000px 0;
padding: 0 0 5000px 0;
min-height: 400px;
}
#right
{
width: 704px;
float: left;
background-color: red;
margin: 0px 0px -5000px 0;
padding: 0 0 5000px 0;
min-height: 400px;
}
#bottom_menus
{
background-color: orange;
height: 15px;
position: absolute;
bottom: 0px;
width: 100%;
}
why position absolute doesn't work?
thanks in advance
for absolute position to work, you must specify both direction: eg. top & left, or bottom & rightetc...
For you footer (bottom_menus) to take all space you need to set:
#bottom_menus {
background-color: orange;
height: 15px;
position: absolute;
left: 0;
right: 0; //assuming you need the footer to take the whole width
bottom: 0;
width: 100%;
}
ps: small remark, you dont need to set px unit when value is 0.
You haven't specified a left, so it's defaulting to 0px; Since you have a margin of -5000px on the box, I'm guessing it is working, and the bottom_menus div is off the screen to the left. Absolute positioning would ignore the padding of its parent container. Try setting left: 5000px, assuming you need the negative margin and positive padding. What are you trying to accomplish with that?