Adjusting div height as you scroll down the page

Hello, I am new to CSS and I have encountered an issue with setting the height of a div element to 100%. When the list on my page exceeds the size of the page, the div is no longer visible when scrolling. Do you have any ideas on how to fix this? Here is the code snippet:

@{Layout = null;}
@model WebRole1.Models.RightsModel

@{
    ViewBag.Title = "AddRights";
}

<html style="background-color:#FFFFFF">
    <head>
        <meta charset="utf-8" />
        <title>@ViewBag.Title - My ASP.NET MVC Application</title>
        <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
        <meta name="viewport" content="width=device-width" />
        @Styles.Render("~/Content/Site1.css")


        <script>
            function myfunc() {

                document.getElementById('mydiv2').style.display = "block";
            }
            function hideview() {

                document.getElementById('mydiv2').style.display = "none";
            }

            // Other JavaScript functions here...

        </script>

This section contains some HTML and Razor syntax used in the web application.

// More HTML code...

// Embedded C# logic for form submission...

In my attempts to solve the visibility issue by setting the bottom property to 0px, I was unsuccessful. The blue div element is not staying visible when scrolling, as illustrated in the image provided below:

...

Answer №1

Check out this cool DEMO

Here is the HTML code:

<div class="wrapper">
<div style="height: 100%; width: 10%; background-color: #6495ED; float: left; word-wrap:break-word;    overflow:auto;">
 cdssdfvsfvsgvvfvfdrgdgdgdgdgdgvdcdssdfvsfvsgvvfvfdrgdgdgdgdgdgvdcdssdfvsfvsgvvfvfdrgdgdgdgdgdgvdcdssdfvsfvsgvvfvfdrgdgdgdgdgdgvdcdssdfvsfvsgvvfvfdrgdgdgdgdgdgvdcdssdfvsfvsgvvfvfdrgdgdgdgdgdgvdcdss...vvsfvfdrgdgdgdgdgdgvdcdssdfvsfvsgvvfvfdrgdgdgdgdgdgvdcdssdfvsfvsgvvfvfdrgdgdgdgdgdgvdcThis is a test for Div height upon page scroll
</div>
</div>

And here is the CSS code:

.wrapper{
height:300px;
overflow:scroll;
}

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

Designing a fixed bottom footer enclosed within a wrapper that expands from the top header to the bottom footer

I have created the basic structure of my webpage using HTML / CSS. However, I now realize that I need a sticky footer that remains at the bottom of the screen with a fixed position. Additionally, I want the main content area, known as the "wrapper," to str ...

Split the cards into 2 columns vertically on smaller screens, positioning the header above both columns

I am having issues with my cards breaking incorrectly on wide screens. I would like to display 4 larger cards followed by 2 columns of smaller cards, all with the correct header above them. Here is the link to my jsfiddle: jsfiddle.net/ad5qa/41tbgk75/ I ...

Creating dynamic dropdowns with Ajax and HTML on the code side

I have developed a script that generates a drop-down menu and updates the .box div with a new color and image. Below is the HTML & Java code: <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> <div> ...

Struggling to make the CSS :not() selector function correctly as needed

I've been struggling to make the CSS :not() selector work in a specific way and despite searching for solutions, I haven't been successful. I came across some helpful resources like this page, but I couldn't figure it out on my own. Hopefull ...

Incorporating a scrollbar when a div exceeds the bottom of the viewport

I am encountering an issue on my webpage with a <div> that contains a <table> with rows of varying heights: <html> <head></head> <body> <div> <table> <tr>... <tr>... ... </ ...

Utilizing Pseudo Classes in Custom Styled Components with MUI

Exploring the world of React and MUI styled components for the first time. Currently, I'm delving into grid layouts and trying to style all children of a specific component. My goal is to target ${Item1}:nth-child(3n-1), ${Item2}:nth-child(3n-1), ${It ...

Can cells within an HTML table be crossed out?

I have a creative idea for an HTML table - I want to be able to cross out cells in a way that looks like the following drawing: At first, I thought about creating a CSS right triangle within the cell. But I got stuck when trying to only color the hypotenu ...

Invisible boundary line within the column

My task involves creating a table using div elements. The layout of the table includes two columns structured as follows: <div> <div class = "columnborder"><span>Some text for column 1</span></div> <div><span>Some ...

I have a flex box with an image and text line inside. How can I adjust the width of the box and text to automatically match the size of the image?

Consider the code snippet below: <style> .img_box { display: flex; } </style> <div class=img_box> <img src=img/> <div>Title text of varying length. It may exceed the image's width or be smaller.</div> & ...

Tips for applying multiple style properties to an element using JavaScript

I have been experimenting with different versions of this code in an attempt to modify a specific element for a coding challenge, but none of them seem to successfully change multiple styling properties of the element upon clicking on a button. Would great ...

The Angulajrjs popup timepicker is not located within the input row

Currently, I am working on creating a popup timepicker within a modal. My main goal is to have the button inside the input field rather than after it. Does anyone know how I can achieve this? Thank you. If you need more context, you can check out my plun ...

Ensure that the text in the table with a width of 100% remains stable

Currently, I am encountering an issue with the inside text moving within my application on a webpage. In my previous tables, I utilized the min-width option to prevent the text or td from shifting when resizing the website page. For example, when stretchin ...

Troubleshooting in Next.js 13: Issue with module not being found while trying to reference a package containing CSS

Currently working with Next.js version 13.4.2 and I have included an npm package that comes with CSS styles and fonts. The issue arises when trying to utilize one of the CSS files within my application. In the layout.tsx file, I imported the CSS file as fo ...

The button's unclickability is due to the zIndex being set to -1

How can I create a clickable button? Feel free to check out the sandbox example here: https://codesandbox.io/s/m5w3y76mvy ...

The Bootstrap Navbar appears hidden beneath other elements on mobile devices

While using bootstrap to style my header contents, I encountered a strange issue. The navbar that appears after clicking on the hamburger menu is displaying behind all the components. Even though I've set the z-index to the maximum value, it still doe ...

In which orientation does the iPad come configured as standard?

There seems to be some confusion regarding the default orientation of the iPad. While some believe it is portrait (which is how I typically use my iPad), others argue that it is actually landscape. In my CSS, I have specific settings for targeting elemen ...

"Trouble with jQuery: Selecting an image to change isn't

Can someone help me figure out why my simple image change on a dropdown isn't working correctly? You can find the code on this Jsfiddle. Thank you for any assistance! $("#display_avatar").change(function(){ $("img[name=preview]").attr("src", $( ...

The functionality of the bootstrap tab('show') is not functioning properly when applied to dynamically loaded tab content

I am currently utilizing ASP.NET MVC along with Bootstrap 3 Within my main view, I have implemented Bootstrap tabs as shown below: <div class="row"> <div class="tabs-container"> <ul class="nav nav-tabs" id="test"> ...

Cannot see the box-shadow with :before and z-index in CSS

My main objective is to prevent the box-shadow from overlapping with adjacent elements by utilizing the :before pseudo-element and adjusting the z-index. However, I am facing an issue where the shadow appears beneath the container of the list item that is ...

Issue with a "hover" effect on a specific input[type="submit"] button

I'm having trouble getting my CSS styles to apply correctly to the input field. Can anyone help me understand why this is happening? If you'd like to take a look at the code, here are the links to the .html file and the .CSS styles. The goal is ...