Css absolute height 100 scroll

CSS/HTML — why does height:100% cause vert. scroll bars?

I’ve taken my page down to the simplest possible form, and I’m still getting a problem where the vertical scroll bars appear. It seems that 100% for height is really using a bit more than that. Is there something that I’m doing wrong?

Looking at my Chrome tools, I can see that body is 1183px x 1515px and body is 1167px x 1515px

krogen

[H]ard|Gawd

Are you sure there is no padding or margin defined anywhere? I’m pretty sure body has margins defined by default in a lot of browsers, including Chrome.

height: 100% will often not do what you want either, unless you use absolute positioning.

Also, make sure you define a DOCTYPE, otherwise you will see weird issues to happen in Internet Explorer.

vsboxerboy

2[H]4U

That’s what I’m thinking but I’ve noticed the same thing in both chrome and FF. Usually I use a DOCTYPE, but for simplicity sake, it was omitted here.

commodore

Limp Gawd

Always include a DOCTYPE .. you don’t even know the crazy stuff i’ve encountered because of the omission of the one line of code.

For 100% height use absolute positioning as mentioned before.

This will work cross-browser. I’m using this myself.

mastaBlasta

Gawd

Sounds like you’re trying to do something fancy otherwise you wouldn’t need height 100% on . For height and width to work consistently well, you should start off with set values in pixels or em, and then start using percentages.

So for example body:style:width:1000px, height:800px

But if you want to do fancy stuff like fullscreen background images and such, then by all means use all percentages

Источник

Scrollable layout with height 100%

Hello there 👋🏼, internet users. Today, I’ll show you a CSS trick I frequently forget about when creating scrollable dynamic height layouts. Recently, I was developing a basic layout similar to one below. It took me a while to remember this trick, but once I did, I had a sense of deja vu and finished the layout. There are two way to achieve this:

Way 1: Using css positions:

If you look at the code above, you’ll see what I mean. As you can see, there’s a NAVBAR, a BREADCRUMB BAR, the MAIN SECTION, and a FOOTER all contained within a layout container with the height of height: 100vh . I wanted the sidebar and content-box in my main section to be scrollable. I could set the height as a fixed value, something like height: 800px with overflow-y: scroll but then making the layout responsive will become a nightmare. So, the question arises? 🤔. How can we apply the overflow-y: scroll attribute to a div with a height of 100 percent? The solution 🧪 here is to use position: relative for the main section container and position: absolute for the sidebar and content bar, with overflow-y: scroll .

.main  position: relative; height: 100%; > .sidebar  position: absolute; top: 0; left: 0; bottom: 0; /*stretch from top to bottom w.r.t .main section*/ width: 10rem; overflow-y: scroll; > .content  position: absolute; top: 0; left: 10rem; bottom: 0; right: 0; /* stretch from top to bottom, and shift 10rem from left and stretch till right */ overflow-y: scroll; > 

There are many other ways, to achieve this. It’s just a trick i often use. If you have any alternate way please comment (I’m all 👂). Congratulations 🎉 for reading this. Hope this might help you. Thank you. After many of you suggested there’s a neat way to do this avoiding css positions. I’ve added another solution using css grid.

Way 2: Using css grid

Источник

Forums

Hi!
I am building a website for a friend of a friend, and I’ve got this design to work after (which, according to me is semi-ugly, but that is up to her). I have a problem with an absolute div no expanding past the windows height.
It can’t be solved with an img tag because it needs to repeat in the y axis.
Could someone help me with this?
The site can be found here.
I am talking about the ribbons on the side. If you resize and refresh your browser, you will see that these ribbons stop at the bottom of the window. Maybe a solution would be to make them fixed, but if it can be solved in another way, it would be really nice. Best regards,
Wilhelm

html and body height 100%, container that has min-height 100 and position relative. then just absolute position right/left and top: 0; bottom: 0; dont use height. does that help? or flexbox.. a lot easier.

Sorry, didn’t help. Already applied those rules. I’ll try a few methods, rearrange the code a bit (with a codepen example) and come back if it doesn’t work.

It’s because you’re setting the height with JavaScript. If you resize the browser to mobile width first then hit refresh, and then scroll you’ll see it works. You might want to bind the functionality of calculating height to the resize event.

Thanks Alen, altough the Javascript was added afterwards as I did not find a suitable CSS solution.
I will definitly bind it to resize, thanks 🙂

Источник

CSS 100% Height, and then Scroll DIV not page

overflow:auto; on the DIV style You should just know that the size of the div should increase so it can show scrolls in it. If you increase the page’s size (which should be with style=»overflow: hidden;» on the body) it won’t work.,If you don’t want to use position:absolute (because it messes up your print out if your margins need to be different than all zeros) then you can do it with a little bit of JavaScript., This is the only solution that approaches the main issue, which is having height: 100%. However it doesn’t require JS, just the height set on all ancestors right to html. Setting overflow is only required on the scrolling container, not any of the ancestors. – Brandon Hill Jun 30 at 21:07 ,Create a simple function to reset the height of your scrollable div

I believe this will work for your case

Answer by Louie Dillon

Okay so I haven’t been able to find a question with an answer yet, so I decided to make my own. ,Set row’s height to 100%,this example will give you a static header and footer and allow the navigator and content area to be scrollable.,So I believe in short I want it to detect the height of the viewport screen, go 100%, and then IF content is longer then the screen, scroll the specific DIV, NOT the page.

I believe this will work for your case

Answer by Isabella Barr

The important thing to remember here is that even though the content is visible outside of the box, that content does not affect the flow of the page. For example:,Generally, you shouldn’t be setting static heights on boxes with web text in them anyway, so it shouldn’t come up.,iOS’ momentum scrolling can be enabled for this value with -webkit-overflow-scrolling.,inherit: sets the overflow to the value of its parent element.

The overflow property controls what happens to content that breaks outside of its bounds: imagine a div in which you’ve explicitly set to be 200px wide, but contains an image that is 300px wide. That image will stick out of the div and be visible by default. Whereas if you set the overflow value to hidden , the image will cut off at 200px.

It’s also possible to manipulate the overflow of content horizontally or vertically with the overflow-x and overflow-y properties. For example in the demo below the horizontal overflow can be scrolled through whilst the text that extends beyond the height of the box is hidden:

Answer by Deborah Kline

What?! It doesn’t work! The height still only takes up the content, but not the whole page.,The width is good since a div is by default a block element, which takes as much width as possible anyways.,Yes that only works on items at the top for heros. It doesn’t allow you to use it mid-page. ,It’s enough to fill entire page without effort.

/* override browser default */ html, body < margin: 0; padding: 0; >/* use viewport-relative units to cover page fully */ body < height: 100vh; width: 100vw; >/* include border and padding in element width and height */ * < box-sizing: border-box; >/* full-sized container that fills up the page */ div < height: 100%; width: 100%; /* example padding, font-size, background, etc */ padding: 10px; font-size: 20px; background-color: lightskyblue; >

Answer by Lyric Donaldson

Setting min-height to 100% on both elements does not allow the body element to fill the page like you might expect. If you check the computed style values in dev tools, the body element has a height of zero. ,With no height value provided for the HTML element, setting the height and/or min-height of the body element to 100% results in no height (before you add content).,For a responsive full page height, set the body element min-height to 100vh.,When it comes to page width and height, do you know what to set on the HTML element? How about the body element?

It is not uncommon to see CSS properties applied to both the HTML and body elements like this:

The image above is taken from a page with the following CSS:

For years, the answer was the following:

The Modern Solution is Simplified

A CSS reset removes this. Otherwise, setting the width to 100% before removing the margins will cause the body element to overflow. Here’s the CSS reset I use:

Answer by Koa Villegas

If an element (or any of its ancestors) has display:none or is not in the document, then all geometry properties are zero (or null for offsetParent).,For not shown elements (display:none or not in the document).,We can use these properties to expand the element wide to its full width/height.,offsetWidth/offsetHeight – “outer” width/height of an element including borders.

Answer by Valentina Nolan

I do not have to add one for horizontal as div is a block-level element that will take the full width horizontally by default.,You can also use position absolute as well as setting all the viewport sides (top, right, bottom, left) to 0px will make the div takes the full screen.,There are multiple ways we can make a div take up the whole screen horizontally and vertically., CSS Make Background Image Full Screen

I have a simple div element with a class name box.

Then, clear any default margin or padding from the html and body tags.

This is because when you set the height to 100% to an element it will try to stretch to its parent element height.

I do not have to add one for horizontal as div is a block-level element that will take the full width horizontally by default.

You can also use position absolute as well as setting all the viewport sides (top, right, bottom, left) to 0px will make the div takes the full screen.

Answer by Daxton Doyle

This is bad because the body content might be higher than the window height. And the body height is used on touch devices to handle smooth scrolling.,The browser forces the body to be the height of the window, not the height of the content.,Then we add height 100% and look at what height the browser thinks the body is: 496px. Which is the height of the window. Not the height of the content.,Instead you can use min-height on the body.

When some content or div need to be 100% height of the window some people may tell you to add height 100% to the body or html tag or both in most cases like so:

Min height 100% will not work which is why CSS added the viewport units: So you use 100vh.

Источник