How can the overflow:hidden be applied to the body after a specified height, rather than the height of the viewport

Question

How can the overflow:hidden be applied to the body after a specified height, rather than the height of the viewport

My page has a <body> element with a height of 800px, however the content exceeds this height.

I would like the body to display content up to 800px and then hide the rest, but using overflow:hidden hides all content beyond the viewport height of 678px. I want the scroll bar to appear once the content reaches 800px.

Below is my code:

HTML

<div class="block">
</div>
<div class="block">
</div>
<div class="block">
</div>
<div class="block">
</div>
<div class="block">
</div>
<div class="block">
</div>
<div class="block">
</div>
<div class="block">
</div>
<div class="block">
</div>
<div class="block">
</div>
<div class="block">
</div>
<div class="block">
</div>
<div class="block">
</div>
<div class="block">
</div>

CSS

body{
    height: 800px;
    overflow: hidden;
}
.block{
    background: #000;
    height: 100px;
    width: 100%;
    margin-bottom: 10px;
}

Here is the fiddle demonstrating the issue: https://jsfiddle.net/0b6g6886/

html css overflow

Answer 1

Answer №1

It is not possible to achieve this using the <body> tag.

To make it work as expected, wrap everything in a div with the class 'wrapper':

https://jsfiddle.net/0b6g6886/

Here is the HTML code:

<div class="wrapper">
  <div class="block"></div>
  <div class="block"></div>  
  <div class="block"></div>
  ...
  <div class="block"></div>
</div>

And here is the CSS code:

.wrapper{
  height: 200px;
  overflow: hidden;
}
.block{
  background: #000;
  height: 100px;
  width: 100%;
  margin-bottom: 10px;
}

Answer 2

It is not possible to achieve this using the <body> tag.

To make it work as expected, wrap everything in a div with the class 'wrapper':

https://jsfiddle.net/0b6g6886/

Here is the HTML code:

<div class="wrapper">
  <div class="block"></div>
  <div class="block"></div>  
  <div class="block"></div>
  ...
  <div class="block"></div>
</div>

And here is the CSS code:

.wrapper{
  height: 200px;
  overflow: hidden;
}
.block{
  background: #000;
  height: 100px;
  width: 100%;
  margin-bottom: 10px;
}

Answer 3

Answer №2

It seems like the styling doesn't quite work on the body element. A possible solution could be to nest all the block divs within a containing div and apply the styles there. I've made some changes in the fiddle to demonstrate this.

Check out the updated fiddle here

.blocks {
  height: 800px;
  overflow: hidden;
  position: relative;
}

.block {
  background: #000;
  height: 100px;
  width: 100%;
  margin-bottom: 10px;
}



<div class="blocks">
  <div class="block">
  </div>
  <div class="block">
  </div>
  <div class="block">
  </div>
  <div class="block">
  </div>
  <div class="block">
  </div>
  <div class="block">
  </div>
  <div class="block">
  </div>
  <div class="block">
  </div>
  <div class="block">
  </div>
  <div class="block">
  </div>
  <div class="block">
  </div>
  <div class="block">
 </div>

Although it's a bit of a workaround, another option is to use CSS to cover the divs with a white section:

body:after {
  content:'';
  position:absolute;
  top:800px;
  left:0;
  width:100%;
  height:1000px;
  background:#fff;
}

If you have access to jQuery, you could also wrap the divs with a container using the following code:

$('body').prepend('<div class="blocks">');
$('body').append('</div>');

You can then apply the same styling as mentioned above.

Answer 4

It seems like the styling doesn't quite work on the body element. A possible solution could be to nest all the block divs within a containing div and apply the styles there. I've made some changes in the fiddle to demonstrate this.

Check out the updated fiddle here

.blocks {
  height: 800px;
  overflow: hidden;
  position: relative;
}

.block {
  background: #000;
  height: 100px;
  width: 100%;
  margin-bottom: 10px;
}



<div class="blocks">
  <div class="block">
  </div>
  <div class="block">
  </div>
  <div class="block">
  </div>
  <div class="block">
  </div>
  <div class="block">
  </div>
  <div class="block">
  </div>
  <div class="block">
  </div>
  <div class="block">
  </div>
  <div class="block">
  </div>
  <div class="block">
  </div>
  <div class="block">
  </div>
  <div class="block">
 </div>

Although it's a bit of a workaround, another option is to use CSS to cover the divs with a white section:

body:after {
  content:'';
  position:absolute;
  top:800px;
  left:0;
  width:100%;
  height:1000px;
  background:#fff;
}

If you have access to jQuery, you could also wrap the divs with a container using the following code:

$('body').prepend('<div class="blocks">');
$('body').append('</div>');

You can then apply the same styling as mentioned above.

Answer 5

Answer №3

To ensure proper layout, insert a DIV element within the body tag and specify its height.

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            .bod{
                   height: 800px;
                   overflow: scroll;

                }
                .block{
                    background: #000;
                    height: 100px;
                    width: 100%;
                    margin-bottom: 10px;
                }
        </style>
    </head>
    <body>
    <div class="bod">
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        </div>
    </body>
    </html>

Answer 6

To ensure proper layout, insert a DIV element within the body tag and specify its height.

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            .bod{
                   height: 800px;
                   overflow: scroll;

                }
                .block{
                    background: #000;
                    height: 100px;
                    width: 100%;
                    margin-bottom: 10px;
                }
        </style>
    </head>
    <body>
    <div class="bod">
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        </div>
    </body>
    </html>

How can the overflow:hidden be applied to the body after a specified height, rather than the height of the viewport

Answer №1

Answer №2

Answer №3

Similar questions

Create a dynamic effect by adding space between two texts on the page

Initiate a page break at the beginning of the table in case there are not enough lines on the first page

Tips on getting your card to stay at the top

The Bootstrap carousel controls now add the carousel ID to the address bar instead of just moving to the next slide

The images are positioned within the middle of the page, directly beneath the sidebar, rather than at the top. (Vue.Js)

Dynamic height adjustment for Bootstrap right column

How to make browsers refresh cached images

Redesigning the reset Zoom feature of HighCharts using a button inspired by Material UI styling

When the font size is set below 16px on an iPhone, iOS will automatically zoom in to compensate

Adding a logo to a website that utilizes CSS, HTML, JS, and Bootstrap

"I'm experiencing an issue where my JSON data is not displaying in the browser when I run the code

The mysterious case of the vanishing jQuery traversal box

I am selecting specific items from a list to display only 4 on my webpage

Having a problem with the glitch effect in Javascript - the text is oversized. Any tips on how to resize

What is causing the child table (toggle-table) to duplicate every time a row in the parent table is clicked?

Unable to update content within the `style` attribute when the HTML is stored in a variable

Is there a way to determine if a certain class link within a DIV has been clicked and then replace the DIV's click functionality?

Grouping of check-boxes in sets of 3

CSS3 problem with using transparent PNGs as border images

Linking a background image in the body to a specific state in next.js