I have a sticky-top navbar. I want the scrollbar to start scrolling inside the container and not the body, because when some other page is shorter and there's no scrollbar the items in the navbar move on the right (for the width of a scrollbar).
How do I need to change the html or CSS?
jsfiddle
You need to use overflow: auto on your container. But it only works if you set the height too!
I guess you want to stretch the container to full height. So the easiest way is to define a variable for the navbar height and calculate the container's height. Add this code to your css:
:root {
--navbar-height: 56px;
}
.navbar {
height: var(--navbar-height);
}
.container {
overflow: auto;
height: calc(100vh - (var(--navbar-height)));
}
Related
I know, this has been asked 1000 times but NO solution from stackoverflow seem to work for me.
Everyone does stuff like .container { height: 100vh; } while the whole idea is to have footer at the bottom if main content of the page has not enough content to stretch.
Parent has flex as display and column direction. Children have flex-grow: 1 and flex-shrink: 0 respectively. Why does it not work? Why is footer not at the very bottom? What am I missing? I don't know height or footer or main, I want the main to take up all the free space at all times.
JSFiddle version: https://jsfiddle.net/6v2gb1s0/
* {
border: solid 1px red;
}
html, body {
height: 100%;
}
#container {
display: flex;
flex-direction: column;
}
main {
flex-grow: 1;
}
footer {
flex-shrink: 0;
}
<div id="container">
<main>main content</main>
<footer>footer</footer>
</div>
The footer won't go to the bottom because the height of the #container is not set.
If you set
#container {
height: 100%
}
The footer will go to the bottom (albeit there will have a scroll because of the margins, so you gotta compensate for that).
Check it out:
It's fundamentally the way flexbox works. display:flex dictates how its children behave, not the parent element. That element just behaves like a normal div. Thus the parent will try to extend to 100% of the width of the parent container and shrink to the height of the content so you have to set the height (or preferably min-height) to 100%.
To understand more how it works, you can set the body element to display:flex and that will cause its child element (the container) to then stretch like you'd expect, which would be an alterntative to setting the container height to 100%.
Hope this helps.
I am trying to make some responsive cards. I have the cards completed and spaced out properly. On the front of the cards I want an image on the top of the cards and a title in the middle. The title is fine and the image is fine except for the right side of the image.
Here is the CSS code for the image (image is in an img tag in HTML page with a class of "image"):
div .image {
padding: 5%;
height: 45%;
width: 100%;
}
The right side for some reason is ignoring the padding and sticking out of the card parent div. Any ideas why?
did you already set div's width?
also as far i know is no need to set image's height if you already set it's width to 100%
anyway here some example
div { width: 200px; height: 150px; padding: 6px; }
div img { width: 100%; }
You set the width to be 100% and padding 5%. Make sure you have:
box-sizing: border-box;
for the parent.
Also without the full example of code, hard to answer. Can use overflow: hidden; on the parent to hide that part sticking out.
I am working on a page layout with a horizontal scrollbar.
I have some panels with fixed widths in a horizontal order, which should all have the viewport height. I decided to test the vh unit to do that.
.panel { height: 100vh; }
This is working fine, until I get a scrollbar.
The problem is, that vh ignores the height used by the scrollbar and therefore adds a vertical scrollbar.
I would like to subtract the height of the scrollbar from the measurements of vh; is there any way to do this?
You could use a parent element with overflow-y: hidden to ensure that you don't get a vertical scrollbar and then safely use 100vh inside it. This is assuming that you do actually need 100vh for some reason and don't just need to fill the vertical space.
HTML
<div id="main">
<div id="container"></div>
</div>
CSS
#main {
width:200vw;
height:100%;
background: red;
position: absolute;
overflow-y: hidden;
}
#container {
height: 100vh;
width:10px;
background: blue;
}
I would like to scroll within a div whose height extends below the browser window without scrollbars appearing on the browser window.
When I add an overflow:hidden style on the body tag this works as long as the div height is < the window height. How can I get the same effect when div height > browser window height?
Is the div height greater than the window height because you have set it that way in css or is there just a lot of content inside the div?
If you have already set its height in css, you might have to wrap it in another div first. Otherwise, try this:
html, body {
height: 100%;
margin: 0;
padding: 0;
}
div {
height: 100%;
width: 50%;
overflow-y: scroll;
}
Example
I have a div on page with a fixed width of 1200px. It's this way because I inserted inside a collection of thumbnails to creates a mosaic. I don't want the mosaic to change if the page is resized.
The problem is that I don't want to have horizontal scrollbars on the page. The div is placed just for visual purposes.
How can I avoid the horizontal navigator scrollbars that is automatically created when browser size is smaller than the div size?
Update: The div can't be positioned fixed.
in css:
html,body {
overflow : hidden;
}
or if you want vertical scrollbars, overflow-x: hidden
or a cleaner way:
<div class="wrapper">
<div class="mosaic"></div>
</div>
and put width:100%;overflow:hidden on the wrapper.
You should be able to do this simply by setting your div to fixed positioning.
.hugediv {
background: blue;
width: 1200px;
height: 200px;
position: fixed;
z-index: 1;
}