What is the best way to display overflow on my website without using the overflow attribute?

When I am setting up an online chat function, here is a brief overview of the client-side code I use:

.msgln {
    margin: 0 0 2px 0;
    padding: 0.5%;
    border: 3px solid #eee;
}

#chatbox {
    text-align: left;
    margin: 0 auto;
    margin-bottom: 25px;
    background: #fff;
    height: 50%;
    width: 100%;
    overflow: auto;
    background-color: white;
}
<div id="chatbox" style="list-style: none;">
  <li>
    <div class="msgln" data-user="Example">(current date)<b>Example</b>: <br/>The quick brown fox jumped over the lazy dog.
    </div>
  </li>
</div>

The issue I'm facing is that the scroll bar only appears on the entire page and not within the #chatbox itself. This means users have to scroll back to the top to access the page header (and signout button) and then return to the bottom to view new messages.

htmlcss

Answer №1

To properly structure your elements, ensure that you wrap the <li> tags within a <ul> tag.

The #chatbox element already has a rule of overflow: auto and a height of 50%. For demonstration purposes, I have added some sample <li> elements with a height: 100vh property applied to the <body> tag.

Does this setup align with your requirements?

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    height: 100vh;
}

.msgln {
    margin: 0 0 2px 0;
    padding: 0.5%;
    border: 3px solid #eee;
}

#chatbox {
    text-align: left;
    margin: 0 auto;
    margin-bottom: 25px;
    background: #fff;
    height: 50%;
    width: 100%;
    overflow: auto;
    background-color: white;
}
<ul id="chatbox" style="list-style: none;">
  <li>
    <div class="msgln" data-user="Example">(current date)<b>Example</b>: <br/>The quick brown fox jumped over the lazy dog.
    </div>
  </li>
  <!-- Additional list items for illustration purposes -->
</ul>

Answer №2

I haven't encountered the same issue, but maybe you should consider using overflow:hidden as a possible solution?

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

Is it possible to replace JavaScript files that are included in my index page if I am utilizing conditional comments specifically for IE9?

My website works perfectly in all browsers, except for IE9. After some investigation, I discovered that the issue lies with a jQuery plugin called multilevelpush.js. While it works great on other browsers, it simply won't cooperate with IE9. Upon fur ...

javascriptjqueryhtml

Dynamic jQuery backstretch feature: automatic image cycling and reversing

I am currently using backstretch on my website and attempting to create a continuous loop of the moving image by automatically shifting it from left to right and back. However, I am facing difficulties as the background only moves in one direction. I am se ...

javascriptjquerycssjquery-backstretch

Invalid argument type and beyond acceptable range: file:///c:/Tools/MYScript.hta

My task involves creating a script to query an MSSQL database and display its content. However, I keep encountering the error message stating Argument wrong type and that it is out of acceptable range. Can someone please assist me with this issue? Below i ...

htmlsql-servervbscript

The interaction of a horizontal scroll bar on a CSS Grid layout triggers the appearance of a vertical scroll bar

I am facing a challenge with my HTML layout. In Chrome, when the horizontal scroll bar is visible, a vertical scroll bar also appears. However, in Firefox, everything works fine. This issue seems to be related to the height of the div not auto-scaling prop ...

htmlcsscss-grid

Using Angular Material to dynamically hide columns in a table that is being created on the fly

Is there a way to hide columns in my table based on the ID value sent to the page upon opening it? While researching, I found a method for tables with dynamically generated columns in this post: https://github.com/angular/components/issues/9940. However, t ...

htmlangulartypescriptangular-material

Setting the root position of a div: How can it be done?

Imagine a scenario where a div element is designed to follow the mouse cursor on the screen. This functionality is achieved by manipulating the document's `mousemove` event and adjusting the div's `left` and `top` positions based on the event dat ...

javascripthtmlcss

What is the best way to apply a border to a div with the style 'overflow:auto' specifically when the scrollbar is in use?

I am facing an issue with a dynamically filled div where the content exceeds a specific height, causing overflow:auto to display a scroll bar only after surpassing that threshold. My task now is to apply a 1px border around the entire div only when the co ...

htmlcoding-stylescrollbaroverflow

Combining GET and POST requests for CSRF attack

Imagine a scenario where a web application includes a delete button. When the button is clicked, the application initiates a GET request that returns a POST form containing a token key. The user is then prompted with a Yes or No question to confirm deletio ...

htmlajaxcsrf

What are the steps to incorporate jQuery Mobile features into a simple webpage?

Recently, I utilized Adobe Dreamweaver CC 2014 to create a jQuery Mobile Webpage. While exploring its features, I discovered a unique capability within the jQuery Mobile Website. This particular webpage was connected to the necessary jQuery CDNs. What stoo ...

jqueryhtmljquery-mobiledreamweaver

To include a slash or not before the assets path in HTML - that is the question

Should the use of / in front of paths in HTML pages be considered a good practice? If using / for paths, is it necessary to configure a <base url=""> in the page? An issue arises with a generated CSS file that includes the following: background-ima ...

htmlpathrelative-path

Creating a design with multiple `<thead>` and `<tbody>` elements

Seeking advice on usability and design elements. I am currently utilizing JQuery to hide/show entire sections within a single large table structure. The layout consists of multiple thead sections, with the main header at the top, followed by sub-headers fo ...

jqueryhtml

able to move through the content without displaying the scrollbar

I am looking to keep my content able to scroll, but I don't want the scrollbar to be visible. I have written my CSS like this: #content-three{ width:100%; height:100%; position:relative; overflow:hidden; } .block_s{ width:90%; ...

javascriptjqueryhtmlcss

Retrieve unique elements from an array obtained from a web API using angular brackets

I've developed a web application using .NET Core 3.1 that interacts with a JSON API, returning data in the format shown below: [ { "partner": "Santander", "tradeDate": "2020-05-23T10:03:12", "isin": "DOL110", "type ...

htmlangulartypescript

Immersive Visual Symphony through Dynamic Multi-Layered

My goal is to create captivating animations for my multiple background images. Here's the CSS code I've come up with: .header { background-image: url('/img/cloud2.png'), url('/img/cloud3.png'), url('/img/cloud1.png&apos ...

javascriptjqueryimagecss

Angucomplete Alternative solves the challenge of accessing remote URLs

I have been using the Angucomplete Alt directive for creating an autocomplete feature. It has been working well so far, but now I want to customize a specific request to be sent to my server. <div angucomplete-alt id="input-name" ...

javascriptangularjshtmlangularjs-directive

Retrieving a pair of data points from a Vue <select> event when it changes

I am facing an issue with a dropdown menu that is using an array with key:value pairs. I want the dropdown to only show values, but when a selection is made, I need to pass both the value and the key using the @change event. <select @change=" ...

htmltypescriptvue.jsdrop-down-menu

How to load several stylesheets for a component in Angular 2

Struggling with my angular2 application, I encountered an issue when attempting to load multiple stylesheets for the same component. Below is a snippet of the code: import { Component } from '@angular/core'; @Component({ selector: 'my-tag& ...

csstwitter-bootstrapangularwebpackstyles

Surprising outcomes when hosting my website on its domain

During the development of my website, I uploaded it to Cpanel once everything was finished. It functioned perfectly fine at that time. However, after making some changes and uploading it again, the fonts and videos on the live domain appear larger than i ...

htmlcsscpanel

Design a dynamic card with an eye-catching Font Awesome icon that adapts well to

As I delve into the realm of CSS, my current mission is to replicate the captivating cards showcased on this particular website. Utilizing Font Awesome icons has become a pivotal aspect of this endeavor. For instance, let's take a look at this card:ht ...

htmlcssbootstrap-4font-awesome

Creating a fixed navigation bar that stays at the top of the page when scrolling

I am trying to create a navigation bar similar to the one seen on W3School's website. I would like the navigation bar to overlap the header when scrolling down, and for the header to appear above the nav bar when scrolling back to the top. Despite m ...

javascriptjqueryhtmlcss