Here's an example of what is happening: https://jsfiddle.net/fz5asxn6/
If you hit 'Click Me' and the Add button a few times you can see items added but the bottom ones are being cutoff and I can't see the bottom of the scrollbar.
I've tried setting the overflow property, flex-flow, and table.
Is there any way to see have the options-body take up the whole options inside the sidebar without cutting anything off?
Whoa, that confused me. I saw your bug and when I opened the dev tools it was gone. It took me a while to realize your media query was changing things based on the height. But that showed me the bug immediately.
Your sidebar has a height: 100%; and a margin-top: 60px;.
Try setting margin-top:0; then you see that this causes the issue.
I suggest setting height: calc(100% - 60px);
And in your media query height: calc(100% - 15px);
That should fix your problem.
You only need to add box-sizing: border-box; to your .sidebar
This will tell the browser to calculate the total height from the border, not the content, and thus the 100% height would include the padding.
So your css for .sidebar would become:
.sidebar {
height: 100%;
width: 250px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
padding-top: 60px;
transition: 0.5s;
box-sizing: border-box;
}
Updated Jsfiddle: https://jsfiddle.net/nabtron/Lznrfcyv/1/
I hope it helps.
Related
Hello I have some issues with a code. I'm trying to do the following. When OPEN POPUP is clicked this will make popup visible and it will cover the whole screen. When X in content is clicked this will close the content and make it will make popup invisible again.
I have achieved this using :target pseudo-class.
You can see the demo here: https://codepen.io/loganlee/pen/Jjdjzom?editors=1100
I have two problems. First, OPEN POPUP link is visible on top of screen and it is not covered by .popup. Even though I've done width: 100vw and height: 100vh.
.popup
{
width: 100vw;
height: 100vh;
position: fixed;
background-color: rgba(black, .8);
opacity: 0;
visibility: hidden;
padding: 10rem 0;
}
Second, .popup__content is taller than .popup when height of screen is made really small. You can see both in the picture.
I think I've done something wrong with layout. Thanks.
Add these style to your code.. for your two issues.
.popup {
top: 0px;
left: 0px;
overflow-y: auto;
}
http://jsfiddle.net/leongaban/6rd2hhpq/8/
I'm working with a fixed position div and making elements scrollable from inside it. Similar to this problem here.
I was able to get the scrollbars to show up, my problem is that I have a fixed header, and my fixed sidebar has to be pushed down in my view.
This allows the user to keep scrolling past the browser window so you lose sight of the scroller.
Is there anyway to keep the scrollbar in view with my example?
So that when the scroller hits and stops at the bottom of the view, you also see the last item.
.red-box {
position: fixed;
width: 100%;
height: 40px;
color: white;
background: red;
}
.sidebar {
position: fixed;
top: 60px;
overflow-y: auto;
margin-left: 20px;
width: 180px;
height: 100%;
}
If I understand the issue correctly - you want the fixed element to fill the screen apart from the header height... then you could try :
.not-stuck {
height: calc(100% - 60px);
}
Looking at the other solutions on the page that was linked to, my personal second choice would be to use JavaScript (but the question doesn't have that tag of course).
I changed the height to 90% and it seemed to work:
.not-stuck {
position: fixed;
top: 60px;
overflow-y: auto;
margin-left: 200px;
width: 180px;
height: 90%;
}
I'm trying to achieve the following with CSS:
I want a fixed sidebar with navigation, so that when you scroll down, the sidebar stays in it's place. The remaining space on the right should be filled up with my content, as if it were the body at 100%.
However, my problem is that the right part takes exactly 300px more space on the right, resulting in a horizontal scroll bar.
I can't fid a solution on my own, can anybody help me? Thanks a lot! :)
JSFIDDLE: http://jsfiddle.net/ALGpP/4/
nav {
height: 100%;
width: 300px;
position: fixed;
z-index:99;
}
#wrapper {
overflow: hidden;
position: absolute;
width: 100%;
margin-left:300px;
}
Do you mean something like this?
I gave the #wrapper element some new CSS properties:
height: 1200px;
background-color: red;
The height: 1200px is in this case just for testing, to make the page longer.
The background-color: red is also just for testing to make it more visible.
Your nav element i have given the following css properties:
height: 100%;
width: 20%;
position: fixed;
background-color: green;
The height: 100% is used to make the element fill the page in the height
The width: 20% is used to make it 20% width.
The position: fixedis to make the element stick to a certain point at the page.
The background-color is used for testing, so you can see better what you're doing.
Also, i reccomend using a CSS reset. This is a really simple one im using in the fiddle:
* {
margin: 0;
padding: 0;
}
It basicly selects all elements and gives it a margin and padding of 0.
If you want the nav element to be 300px wide, use this fiddle.
Fix for the content that wasnt showing
Add the following properties to your #wrapper element:
width: calc(100% - 300px);
float: right;
So it looks like this:
#wrapper {
width: calc(100% - 300px);
height: 1200px;
background-color: red;
float: right;
}
Demo here
I apologize if this is a trivial question but I can't seem to figure it out. I have this website and I need the navigation bar on the side, and the rectangle all the way on the right (The one with the "ContentExtender" class) to stretch down to the bottom of the physical page (well, the ContentExtender only needs to stretch as far as the content so it blends, but that's another story). What is the simplest way to do this? I looked it up and found setting the Body's height to 100% should work, but it didn't. I know that's a lot of code to look through, so here is the actual important parts of the code (anything prefixed with "cc" was just an easy way of commenting them out):
.ContentExtender {
background-image: url(bgblack.png);
min-height: 10px;
ccmin-width: 200px;
ccwidth:100%;
margin: 0px 0px 0px 1010px;
position: absolute;
top: 110px;
right: 0px;
left: 0px;
}
.MainParent {
position: absolute;
left:0px;
top:0px;
right:0px;
bottom: 0px;
background-color:rgba(70,70,70,.7);
min-height: 600px;
min-width: 1000px;
max-width: 1000px;
height: 100%;
margin: 0px 10px 0px 10px;
z-index:100;
overflow: hidden;
}
You need to give html, body { height: 100%; } plus make any other parents of the element you want to have height: 100%;, height: 100%;
I recently had a problem where I could not extend to the top of the window, which may be similar. I set:
body {
margin: 0px;
}
In your case, it may be another element. I have seen where all possible elements are intentionally set to a 0 margin, and then the margins desired are re-implemented.
seems like there's a small error in your code try editing your
.ContentExtender
and change it to
#ContentExtender
Then you will be able to fix it, if this method doesn't work try setting the background CSS on the HTML tag of the Content extender like below
html{
height:100%;
background:#ccc url(bgblack.png);
}
the above is an example, so please improvise
Your issue is linked to the fact that a child div cannot directly dictate the behaviour of a parent.
Try one of these on your parent div:
overflow: auto;
display: table;
Or in the child div:
display: table-row;
When you try it, experiment with omitting the "height: blabla" attribute.
Similar problem solved: [1]: CSS - Expand float child DIV height to parent's height
http://jsfiddle.net/talmuda3/s9QyR/
footer {
margin-top: 1em;
width: 100%;
height: 20em;
position: relative;
bottom: 0;
left: 0;
}
The layout of an offline website is tricky. The content overflows into the footer.
Part of the code is as above.
How can the content be adjusted so the footer remains at the bottom, and the content stretches across the site without overlapping the footer. Please be gentle. Checked Chris Coyier's site for any tips - might just have missed something. Can anyone help?
You're pushing the article down with the top: 12em declaration. You should give the footer the same property, which fixes the issue: http://jsfiddle.net/s9QyR/1/
you should also push footer top:12em; that will add footer in right position. demo
I think this is what you're after - jsFiddle
article {
margin-top:12em;
width:80%;
height:100%;
margin-left: auto;
margin-right: auto;
margin-bottom: 3em;
padding: 1em;
z-index: 2;
background: transparent;
overflow: visible;
}
footer {
margin-top: 1em;
width: 100%;
height: 20em;
}
It seems that changing the positioning broke the natural flow of your elements.
You may want to try this method to avoid having to position everything down the line.