Vertical navigation that stretches entire page - html

I need a vertical navigation that will stretch the entire screen. How can I do this?
Typically, I would set the navigation with:
position: absolute;
height: 100%;
overflow-y: hidden;
but I can't get this to work for me for some reason or another. It shows a scroll bar regardless, and doesn't stretch the entire page--only the height of one viewport. You can view a working example here:
http://solstaging.net/vhosts/dealer-world-delivery/

Add position: relative to your body tag and the #primary will be the full height.

Related

Sticky and scrollable Sidebar sidebar - CSS and HTML

I am working on a Shopify Store but I would like to make a this sidebar sticky and scrollable. The reaso to be scrollable is that when using the position: sticky; css callout the sidebar appears to be very big so it is not visible until the end of the page, then at that moment I would love to make it scrollable so we can filter without having to go to the bottom of the page. I have found something like overflow-y: scroll; but does not work together with the sticky thing. I am sharing some example pics: IMAGE HERE 1 IMAGE HERE 2
You might need to add max-height property to the sticky element
like so
.side-nav{
position: sticky;
overflow-y: scroll;
max-height: 100vh;
}
now your sidenav has a max-height of the height of your screen, so it can apply the scroll behavior if the content is larger than the container

Scrolling Menu When Vertically Overflows

I'm attempting to make this hamburger menu (visible when the page width is less than 865px) scroll to show whatever overflows the VH on screens not tall enough to display the whole menu at once. From my understanding by setting a fixed height to the dropdown section itself, something like calc(100vh - *header-strip-height*) combined with overflow-y: scroll; applied to #header_menus should work, however, because the #header_menus div is a child element of the top strip, and the top strip has a defined height, setting overflow-y: scroll; seems to force the dropdown segment to only take up the VH of the strip menu, and scrolls within the confines of the strip menu, instead of taking up the entire right side of the site, of all the solutions I've tried, I have yet to arrive at something that does not interfere with the placement of the body relative to the header, which is represented in the codepen by a placekitten image.
Looking for suggestions on how to allow the dropdown hamburger menu to scroll when it vertically overflows, without breaking the header layout in a way that interferes with the body in any way, ideas?
https://codepen.io/roomwillow/pen/BaWQoVJ
The issue caused by the fixed height set on your navigation.
In order to handle this you can set an absolute position on the menu,
when the viewport is under 865px.
As such:
#header_menus {
background-color: black;
padding-right: 1rem;
padding-left: 2rem;
overflow: auto;
position: absolute;
height: calc(100vh - 5.5rem);
top: 5.5rem;
right: 0;
}
Do make sure to add relative to the parent so it doesn't mess up the page:
#header_right_section {
position: relative;
}
This will make it work.
https://jsfiddle.net/5zjw1b6h/

Scrollbar only on one div and not the whole body

I have a problem, i am making a website for a friend and he wanted a horizontale one page website,
but i have a problem, i want to create it like this that you can scroll the page vertical if the page is longer then the screen, BUT i want the scrollbar IN the div and not over the whole body content.
I created a image quickly what i mean with the scrollbar.
and on this moment if had did it over the whole body all the other pages got the same height if one page was longer then the other one.
Image:
Live example: http://onepage.ringocontent.com/
The live example is how i described it above about that all the pages get the same height if only one page get a overflow with the height.
Adding this to your stylesheet should solve the problem:
<style>
#home, #blog, #info, #contact {
overflow-y: scroll;
height: 500px;
}
#page {
height: auto;
}
</style>
I think what you are looking for here is the overflow property of an element. Particularly overflow-y.
If you apply
overflow-y: auto;
To the #page div then you will get a scroll bar inside of that div if and only if you have content inside of it that overflows the height of the div.
If you are seeing a scroll bar on the right hand side of the page then you have the div #page height set too tall, try reducing the height on that div until that scroll bar goes away.

I want my container div to expand vertically to accommodate its content...?

I am creating a page that has a background image and the content is within a centered container that runs vertically down the page. Similar to the Yahoo! Answers layout: http://uk.answers.yahoo.com/
If you minimise your browser while on Yahoo! Answers the vertical scrolling just becomes 'longer' and the content all stays on the white container.
However, on mine when I minimise my browser the content towards the bottom of the container overflows and appears on the background image instead. I want the container to expand..
I do not want to use the overflow:auto or any other overflow attributes and I don't like the scroll bars.
Please see below and thank you in advance:
body {
background-image: url('images/ppback.jpg');
padding: 0;
margin: 0;
width:100%;
height:100%;
}
#container {
position: relative;
background: #440077;
width: 770px;
margin:0 auto;
top: 0px;
height: 100%;
opacity: .7;
filter:alpha(opacity=70);
)
Just remove the value height: 100% from #container. This is setting the max height of your container to the same height as the browser window, preventing anything longer than the window from being displayed.
I'm guessing that you added this property so that the entire background will display on the page when there is little page content. To get the effect you're looking for you may have to create a separate div, in a fixed position, and positioned center, with a z index smaller than your main #container.

HTML body height - fixed?

I'm trying to make the main body of my site to have a fixed height (I think!).
Anyway, the site body is just white, with a border of size 1. Basically, the size of the body is determined by what's in it so, for example, it will resize automatically as more things are added.
What I want is vertical scroll bars so the body doesn't extend forever (is that right?). Should I have a fixed body size?
If you want vertical scroll bars you can use this in your CSS;
body {
height: 900px;
overflow-y: scroll;
overflow-x: hidden; /* hides the horizontal scroll bar */
}
What are you trying to accomplish? You sound unsure if you even want the scroll bars; is there a reason you want to show the scroll bars instead of just having the browser handle the scrolling when the content gets larger than the window?
Yes. You need a fixed height
body{
height: your-height;
overflow:auto;
}
will generate scroll bars only when you overflow the area without growing it vertically.
So, in your body create a layer:
<div id="mainbar">
</div>
And using CSS you can set the height:
div#mainbar {
min-height:100px;
overflow:auto;
}
The min-height guarantees the initial height that you need. Once it goes over that, it you will automatically have scrollbars. If you would rather the page itself scroll and the body lengthen, just take out the overflow line from the CSS.
If you want the vertical scroll bars to an inner div on your site (like so you can have a footer visible at all times), simple specify the height of the div:
#inner { max-height: 300px;
}
I think the default for the overflow is to scroll, but if your content is cutting cut off with no scrollbars, you could also set
overflow: auto;