What is the best way to limit the size of a scrolling div within its parent container to less than 100%?

Can't wrap your head around this seemingly simple issue. I get it, we've all been there.

Here's a snippet of HTML:

<div class="outer">
  <div class="inner">
    <!-- lots of text -->
  </div>
  <div class="inner-bottom">
    This text should be inside the blue background
  </div>
</div>

CSS stuff:

.outer {
  height: 300px;
  background: #99EEFF;
}

.inner {
  height: 100%;
  overflow: scroll;
}

.inner-bottom {
  text-align: center
}

Check out the Fiddle here

The main idea is to make sure both inner divs fit neatly within their parent container, with a clearly defined background color for clarity.

If height: 100%; isn't specified on .inner, things tend to go haywire, regardless of what you set the display property to. In fact, certain display values can even mess up the height: 100% rule.

All in all, solving this puzzle means making sure that .inner's dimensions are controlled by .outer, not the other way around. Ready to crack this? Let's do it!

htmlcss

Answer №1

To achieve this layout using Flexbox, simply apply flex: 1 to the .inner element.

body {
  margin: 0px;
}
.outer {
  height: 300px;
  flex-direction: column;
  display: flex;
  background: #99EEFF;
}
.inner {
  flex: 1;
  overflow-y: scroll;
}
.inner-bottom {
  text-align: center
}
<div class="outer">
  <div class="inner">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit...
  </div>
  <div class="inner-bottom">
    This text should be inside the blue background
  </div>
</div>

Answer №2

While Flexbox is a popular choice for layout, there are other options to consider as well. For example, if you prefer a non-flex solution and have set the outer div to 300px in width, you can also assign fixed pixel values to the inner divs. How large do you want them to be? One approach is:

.inner {
 height: calc(100% - (specify the height of .inner-bottom));
}

Alternatively, you could use percentages that total to 100 for the height of both elements, or opt for pixels that add up to the desired 300px. The decision is yours to make based on your specific needs.

Answer №3

The ideal method is to adjust the height of the inner element.

.inner {
    height: 275px;
    overflow-y: auto;
}

Add a bottom padding to the parent element, which has the 'outer' class assigned.

.outer {
    height: 300px;
    background: #99EEFF;
    padding-bottom: 30px;
}

Answer №4

The content within the inner-bottom element appears outside of the blue background because the .inner div consumes all available vertical space within the containing .outer DIV. If you adjust the height of the .inner div to be less than 100%, there will be room for the .inner-bottom element to fit within the boundaries of the .outer DIV. So, modifying

height: 100%

to something like

height:65%

within the .inner CSS should resolve the issue.

PS. You can replace 65% with any value lower than 100% and the layout should still function correctly.

Answer №5

I have discovered a more streamlined, interactive, and universally compatible method using tables.

HTML:

<div class="table">
  <div class="tr greedy">
    <div class="td">
      <div class="scrollable">
        <!-- Lots of text -->
      </div>
    </div>
  </div>
  <div class="tr">
    <div class="td centered">
      Text should be inside the blue box
    </div>
  </div>
</div>

CSS:

.table {
  display: table;
  height: 300px;
  background: #99EEFF;
}

.tr {
  display: table-row;
}

.td {
  display: table-cell;
}

.scrollable {
  max-width: 100%;
  max-height: 100%;
  overflow: auto;
}

.greedy {
  height: 100%;
}

.centered {
  text-align: center;
}

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

col-md-4 overlapping on smaller screens

I have a contact section on my website that contains columns. I used col-md-4 as the site is divided into 12 columns, but on mobile devices, they stack on top of each other. How are you today? https://i.sstatic.net/CdKAI.png And I'm trying to keep ...

htmlcsstwitter-bootstrapbootstrap-4

The Bootstrap dropdown vanishes before I can even click on it

I recently encountered an issue with my Bootstrap dropdown menu on my website. After making some changes, the dropdown disappears after 1-2 seconds when viewed on a mobile phone. Interestingly, the original Bootstrap menu works fine, but not my customized ...

javascripthtmlcsstwitter-bootstrapdrop-down-menu

Tips on choosing the initial N website elements that match a specific CSS selector using Python Selenium

Currently, I am utilizing phantomJS in a python/selenium configuration to scrape the screen. My main objective is to extract the first N elements that match a specified CSS selector. An issue I am encountering is that there are significantly more matching ...

pythoncssseleniumscreen-scraping

Steps to switch from the "on click" event to on mouse over in the following code

Can someone help me modify this code to load the larger image on mouse hover instead of on click? Additionally, is there an easy way to add "next" and "prev" buttons to navigate through all the images once a larger image is loaded? Thank you! /** * Image ...

javascriptjqueryhtmlonclickonmouseover

Evaluate the user's answers to a database using a SQLite 3 C++ Quiz

Currently, I am in the process of writing a C++ program that utilizes SQLite. The main aim is to enable users to specify their preferred hotel room options. Subsequently, the program compares these user selections with the information stored in a database. ...

htmlc++sqlite

Retrieve the value of a checkbox from a PGP email form

Although I am not a programmer, I managed to get this code to work, which sends an email with all the values. However, I am facing an issue where the checkbox values appear blank in the email even when they are checked. Any assistance would be greatly appr ...

phphtmlformsemailcheckbox

How can I display one large image when hovering over six smaller images?

I am attempting to display a larger image when hovering over one of six smaller images. The enlarged image will be composed of the arrangement of the six smaller placeholders. Refer to the attached image for a visual representation of my objective. Grat ...

jquerycsshover

Get rid of just this one specific element using jQuery

I have implemented a feature where tasks are dynamically added to a list when the input is entered and its length is less than or equal to 30 characters, followed by clicking a button. Each task comes with a trash icon for removal, sourced from an externa ...

javascriptjquerycss

Showing a component outside a container with hidden overflow

My <table> is scrollable by being enclosed in a fixed height <div>. The dropdown component within the <table> (blue container in the 2nd column of the 1st row in the image and JSFIDDLE link provided below) is currently hidden behind the ...

javascripthtmlcss

Issues arise when attempting to use JavaScript to update the innerHTML content of a webpage

I have created a JavaScript code (shown below): function gup(name) { name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]"); var regexS = "[\\?&]" + name + "=([^&#]*)"; var regex ...

javascripthtml

Guide to importing a JSON file into Vue.js and HTML

I'm a beginner in Vue and not very familiar with HTML I'm attempting to import data from a JSON file into my interface to display it for the user. Below is the structure of the JSON: [ { "Title": "SOFT-STARTER", "Cod&q ...

javascripthtmljsonvue.jsvuejs3

What steps can I take to stop the datepicker from altering the value of the previous row?

I have implemented a datepicker function using React Bootstrap for each table row. The issue I am facing is that when I change the date in the first row, it correctly updates. However, when I try to change the date in the second, third, and subsequent rows ...

javascriptjqueryhtmlreactjs

Using the ID selector to create a media query

My website is live, and I'm working on making it mobile-friendly. Most of the site works well on mobile, but I'm having trouble centering a jquery lightbox function using media queries. I'm not sure if my syntax is wrong or if there's a ...

jqueryhtmlcss

Ways to prevent the jQuery simple slider from transitioning slides while it is in an invisible state

There is a jQuery slider on my website that behaves strangely when I navigate away from the Chrome browser and return later. It seems to speed through all pending slides quickly when it was not visible. Now, I want the slider to pause when it becomes invi ...

javascripthtmljquerycss

There are no users associated with this profile

My goal is to implement a context processor for displaying a user's profile page. However, when I try to use it, the website returns the message: Profile has no user Here is the context processor I have written: from .models import Profile de ...

pythonhtmldjango

Displaying an image using JQuery prior to the .load() method

I've seen this question asked multiple times before, but I really need a simple way to display a loading image before the content loads, similar to how Facebook's signup form works and many other websites. $("#signUpPanel").click(function(){ ...

javascriptjqueryhtmlloadspinner

Similar stylesheet produces varying outcomes on browsers other than Chromium

My CSS is producing different outcomes on various browsers, particularly on non-chromium browsers such as Firefox, while the results remain consistent on chromium-based browsers like Google Chrome and Opera. It seems to be a browser compliance issue. How ...

htmlcssgoogle-chromefirefoxchromium

Customizing color schemes of bootstrap buttons and dropdown-toggle elements

My button group looks like this: HTML <div class="btn-group"> <button type="button" class="btn btn-default btn-xs red-outline-button"> Sync </button> <button type="button" class="btn btn-default btn-xs gold-outline-button" da ...

htmlcsstwitter-bootstrap

Ways to update font color using bootstrap-cue

Looking for a button with white text on a dark-blue background Find the code in xxx.vue <b-dropdown text="user" right variant="blue" class="signout-button"> <b-dropdown-item @click="toMain()">sign out</b-dropdown-item> </b-dro ...

cssvue.jsbootstrap-4

"Step-by-step guide for incorporating a right-to-left (RTL) Bootstrap

Is there a way to make my bootstrap navbar right-to-left (RTL)? I want the logo to be on the right and the links to flow from right to left. I've tried various tricks but none of them seem to work. Here's the code I currently have: <nav class ...

csstwitter-bootstrapbootstrap-4navbar