Creating a web page with CSS that completely fills the screen and includes a lengthy list within the design

I am looking to create a webpage that takes up the entire browser window. However, I also need to display a long list on this page that requires a scrollbar for navigation. Currently, with my existing HTML code, the list is causing the page to stretch in an undesirable manner. Below is the code snippet for my current page:

<!DOCTYPE html>
<html>
<head>
    <title>Demo</title>
</head>
<body style="height: 100%; margin:0; background-color: #FFFF00">
<header>
    <H1>Header of page with long list of items</H1>
</header>
<section style="position: absolute; top: 80px; bottom: 5px; width:100%; background-color: red">
    <div style="background-color: #BBBBBB">
        <div style="overflow-y: auto;">
            <ol>
                <li><h3>Item in the list</h3></li>
                <li><h3>Item in the list</h3></li>

                (Additional list items...)
                
            </ol>
        </div>
    </div>
</section>
</body>
</html>
htmlcssoverflow

Answer №1

Check out this example.com

CSS Styles

body {
      height: 100vh;
      background-color: #FFFF00;
      overflow-y: hidden;
  }

  .list {
      height: 100vh;
  }

  .list ol {
      overflow-y: scroll;
      height: 100%;
  }

HTML Markup

<header>
    <H1>Header section with a long list of items</H1>
</header>
<section style="position: absolute; top: 80px; bottom: 5px; width:100%; background-color: red">
    <div style="background-color: #BBBBBB">
        <div class="list">
            <ol>
                <li><h3>Item in the list</h3></li>
                <li><h3>Item in the list</h3></li>
                <li><h3>Item in the list</h3></li>
                <li><h3>Item in the list</h3></li>
                <li><h3>Item in the list</h3></li>
                <li><h3>Item in the list</h3></li>
                <li><h3>Item in the list</h3></li>
                <li><h3>Item in the list</h3></li>
                <li><h3>Item in the list</h3></li>
                <li><h3>Item in the list</h3></li>
                <li><h3>Item in the list</h3></li>
                <li><h3>Item in the list</h3></li>
                <li><h3>Item in the list</h3></li>
                <li><h3>Item in the list</h3></li>
                <li><h3>Item in the list</h3></li>
                <li><h3>Item in the list</h3></li>
                <li><h3>Item in the list</h3></li>
            </ol>
        </div>
    </div>
</section>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Include a class for CSS styling in EJS using Node.js

Attention: Please be aware of the environment in this Application. The following technologies are being used: Windows NPM, Express MySQL This is the code in an ejs template called example.ejs <% if (message) { %> <p class="al ...

cssnode.jsexpressejs

Choose a parent to edit/modify - HTML

https://i.sstatic.net/gGlWC.jpg The editable green section within the CMS system is where modifications can be made, however the red area is not editable. I am looking to make changes to specific flex elements within the class highlighted in blue. Is the ...

htmlcssparent-child

How to efficiently manage Bootstrap tabs that share the same ID

I am looking to consolidate two pieces of content with the same ID into one location. Currently, I have tabs for home, menu1, and menu 2, each with their own respective content tabs under menu 1. My goal is to combine both instances of menu 1 content into ...

javascripthtmlbootstrap-4

Adjusting the height of the navigation bar in BootStrap

I'm having trouble resizing the height of the navbar-default in this Bootstrap sample. It seems to be too big for my needs. Are there any Bootstrap classes I can use to adjust the height? For example: <form class="navbar-form navbar-left" role="s ...

htmlcsstwitter-bootstrap

The dropdown-menu is positioned in a different location than its relative position

Utilizing the bootstrap dropdown feature in the navigation bar with a menu (represented by three dots) icon https://i.sstatic.net/vR13Z.png However, the issue arises on mobile devices. When I open the navigation bar and click on the menu button, the dropd ...

htmlcssangularbootstrap-4

Guide on accessing a method from a div element in VueJS

Is there a way to only render a div based on a specific condition and call a method when the condition is true? Here's an example of what I'm trying to achieve: <div v-if="timetable === null" @click="mymethodhere"> ...

javascripthtmlvue.js

Determine the value of a checkbox as 0 if unchecked and 1 if checked

How can I retrieve a value of 1 when a checkbox is checked and 0 when it is unchecked? <input type="checkbox" name="data[color][]" class="color" value="1" checked> The data array stores information from in ...

phphtml

What is preventing relative paths from functioning with xsl:include?

I am working with an XSL file that converts to PDF. The top of the page contains a lengthy CSS style declaration: <xsl:attribute-set name="Header"> <xsl:attribute name="font-size"> <xsl:value-of select="$font-size"/> < ...

cssxmlxslt

What is the method to alter text color within a navigation bar?

I used one of the recommended bootstrap 4 navbar styles in my project, but encountered an issue when changing the background color from dark to white. This change made the text inside the navbar invisible. Despite trying various methods to change the text ...

htmltwitter-bootstrapbootstrap-4

When hovering, the CSS border-bottom should extend

I am looking to create an animated border effect. When hovering over the link, I want the border-bottom to extend seamlessly from left to right. After much searching, I am still unsure what this effect is called. Below is the code I have: .a{ width ...

htmlcss

Setting column heights and spacing in Bootstrap

I'm looking to dynamically populate the blocks. Essentially, a for loop would be used to pass the data. However, I'm facing some challenges with the height of the blocks at different screen sizes while utilizing bootstrap 4. My goal is to have th ...

htmlcssbootstrap-4

Unlimited height dialog overlay exclusive to Facebook

It seems like a crucial matter that needs attention. My dialog has an overlay with specific width settings as shown below: .ui-widget-overlay { width: 518px !important; } The height of the overlay will vary based on the page size controlled by JavaS ...

javascriptjquerycssfacebookjquery-ui-dialog

I'm looking to switch out the `~` to turn it into a URL for the backend, seeing as `<img alt="" src="~/media/Banner/plane.JPG">` is returning a 404 error

1. Received an HTTP Request and JSON response from the backend localhost:3000 (entered value using wysiwyg) { "Description": "&lt;img alt=&quot;&quot; src=&quot;~/media/Banner/plane.JPG&quot; /&gt;1 test berita&lt ...

javascripthtmlangulartypescript

Receive the latest order details following jQuery Sort

Utilizing jQuery UI's Sortable feature, I am reordering a list of items and aiming to adjust the class of each item based on its new position. Below is the HTML structure: <ul id="sortable"> <li class="1">apple</li> <li c ...

javascriptjqueryhtmljquery-uijquery-plugins

Is it possible to use traditional form submission after dynamically adding an HTML control with JQuery?

I just need some clarification! If I have added an HTML control (input, dropdown, etc.) after the page has loaded using jQuery, can I still submit a form using the traditional method (HTML submit button)? Or do I have to submit all HTML controls using an ...

jqueryhtmlajax

What steps should be taken to generate a successful pop-up window post registration in PHP?

beginning section continuation What is the best way to design an effective popup window? ...

javascriptphphtmlnode.jsajax

What are the steps for adding a JSON file to a GitHub repository?

Could someone lend a hand with my GitHub issue? I recently uploaded my website to a GitHub repository. The problem I'm facing is that I have a JSON file containing translations that are being processed in JavaScript locally, and everything works fine ...

javascripthtmlcssjsongithub

Setting push and pull columns in Bootstrap for smaller screen sizes can help to rearrange the layout and improve the

On my page layout with Bootstrap 3.2.0, I have set up the following structure: <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">1</div> <div class="col-lg-5 col-md-5 col-sm-6 col-sm-push-6 col-xs-12">2</div> <div class="col-lg ...

csstwitter-bootstraptwitter-bootstrap-3

Top div click causes bottom div to slide

I'm currently working on a project that involves using CSS and jQuery, but I've encountered an issue that I haven't been able to solve. https://i.sstatic.net/CSovs.png Here is the demo link: . When the second div is clicked, why does the t ...

jquerycss

Exploring Next.js: A beginner's attempt at displaying basic JSON data

I'm having trouble updating and displaying the content of my JSON data in my React app. Despite trying various solutions, including adjusting the return value of functions and seeking help on forums, I still cannot get rid of the issue where an empty ...

htmljsonnext.js