What is the best way to ensure an element reaches its full height limit without triggering the need for page scrolling?

Can you help me with a dialog box issue I am facing?

$(document).ready(function() {
  $('.ui.modal').modal('show');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e88e878589869c818bc59d81a8dac6dfc6de">[email protected]</a>/dist/semantic.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="94f2fbf9f5fae0fdf7b9e1fdd4a6baa3baa2">[email protected]</a>/dist/semantic.min.js"></script>


<div class="ui overlay fullscreen modal">
  <div class="header">
    Dialog box
  </div>
  <div class="content">
    <div class="ui warning message">
      <div class="header">
        Be careful
      </div>
      This is a warning message
    </div>
    <div style="background-color: blueviolet">This is the container.<br />This is the container.</div>
  </div>
  <div class="actions">
    <div class="ui approve button">Save</div>
    <div class="ui cancel button">Cancel</div>
  </div>
</div>

I am looking to ensure that the purple div (the one with "This is the container" text) has the maximum height possible without causing the page to scroll. Here is an example of what I am aiming for:

https://i.sstatic.net/SEkjP.jpg

I have already attempted using height:100%, but it has not yielded the desired outcome. Is there a way to achieve the result shown in the image without specifying a pixel value for the height?

cssflexboxheight

Answer №1

Transform the container (.content) into a flex container with column direction.

Apply flex: 1 to the purple box.

Include the following in your CSS:

.ui.modal > .content {
    display: flex;
    flex-direction: column;
}

.ui.modal > .content > div:last-child {
    flex: 1;
}


$(document).ready(function() {
  $('.ui.modal').modal('show');
});
.ui.modal > .content {
    display: flex !important;
    flex-direction: column;
}

.ui.modal > .content > div:last-child {
    flex: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bed8d1d3dfd0cad7dd93cbd7fe8c90899088">[email protected]</a>/dist/semantic.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ec8a83818d8298858fc19985acdec2dbc2da">[email protected]</a>/dist/semantic.min.js"></script>


<div class="ui overlay fullscreen modal">
  <div class="header">
    Dialog box
  </div>
  <div class="content">
    <div class="ui warning message">
      <div class="header">
        Be careful
      </div>
      This is a warning message
    </div>
    <div style="background-color: blueviolet">This is the container.<br />This is the container.</div>
  </div>
  <div class="actions">
    <div class="ui approve button">Save</div>
    <div class="ui cancel button">Cancel</div>
  </div>
</div>

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

In which specific location within the Bootstrap CSS files can the `footer` class be found?

Being new to coding, I've grasped HTML and CSS classes and am now delving into Bootstrap. Despite my efforts, I can't seem to locate the footer class in any of the Bootstrap CSS files like bootstrap.css. Similarly, I'm having trouble findi ...

htmlcssbootstrap-5

Tips for aligning two separate texts depending on if they appear on the same line or not

Looking to align text B to the right when text A and B are on the same line, but automatically aligning text B to the left if it wraps to the next line due to space constraints. .text-left { float: left; /* Float to the left */ } .text-right { fl ...

htmlcss

Why is my bootstrap-enhanced website appearing unattractive on MSIE 8?

Check out my website at My website displays perfectly in browsers like Firefox, Chrome, Opera, and the Android Browser. However, when I viewed it on Internet Explorer 8 at my parent's house, it looked all messed up. How can I improve the compatibilit ...

csshtmltwitter-bootstrap

What are some best practices for implementing responsive design using CSS @media queries with makeStyles in React.js Material UI?

const useStyles = makeStyles(theme => ({ wrapper: { width: "300px" }, text: { width: "100%" }, button: { width: "100%", marginTop: theme.spacing(1) }, select: { width: "100%", marginTop: theme.spacing(1) } })); I ...

javascripthtmlcssreactjsmaterial-ui

What are some creative ways to enhance the appearance of a deactivated radio button?

In a table cell, I have a set of radio buttons with a background color that differs from the rest of the page. At times, based on another input, I need to disable certain radio buttons. When a radio button is disabled, its interior color blends with the t ...

cssradio-button

Hover image displacement

Can anyone help me identify the feature used in this price list where the mouseover changes and a big image appears underneath? I'm trying to achieve something similar but can't figure out how. Any guidance would be appreciated. ...

htmlcss

Exploring Bootstrap 4: Creating list-inline elements for various screen sizes

Is there a way to align list items on top of each other for a breakpoint <=575px (xs), and align the items next to each other for a breakpoint >575px (sm) using Bootstrap display properties? I found some information on How to display a list inline u ...

csstwitter-bootstraptwitter-bootstrap-3bootstrap-4

Using the radius to determine the center point of the circle

<span class="qs">Q{{i + 1}} <a href="#question-view"></a></span> <div class="tooltipp text-center bubble[ngStyle]="bubbleStyle(prof?.proficiencyBrightness, prof?.proficiencyRadius)"> </div> In the illustration below, ...

htmlcssbootstrap-4

The enchanting world of CSS background scrolling animations

I am currently developing a website where I have split the hero/header into two sections - one on the left with information and the other on the right with a graphic. I wanted to add a simple parallax effect to the image on the right side, so I used backgr ...

jqueryhtmlcss

Scroll bar for multiple selection select tag without using div element (not supported in firefox)

.selector select[multiple="multiple"] { border-radius: 0; height: 200px; margin: 0 0 0 -1px; max-width: 368px !important; padding-left: 3px; width: 368px !important; } <select id="id_included_packages_from" class="filtered" multiple="multipl ...

htmlcss

Increase and decrease a counter in Javascript by clicking on two separate image tags, with increments and decrements between 1 and 10

Hello! I really appreciate your help. I am currently facing the following issue: <div id="thumb1"> <img class="img-responsive" id="prova" src="img/thumb-up-dark.png" alt=""> <div id="pinline">0</div> ...

javascriptjqueryhtmlcsscounter

unable to connect css file to document

My index.html file is not reading the style.css file for some reason, even though it is linked. I have added the type and checked the path, but still facing issues. Can anyone help troubleshoot this problem? Thank you. https://i.sstatic.net/xxpBV.png htt ...

javascripthtmlcss

Is there a way to bring my popup closer to my button?

Check out my jsfiddle example here: https://jsfiddle.net/annahisenberg/ft10ersb/34/ Currently, I have the following code: <div id="more_options_popup" style={{ left: this.ref.current.offsetLeft - 140 + "px", top: this.ref.current.offsetTo ...

javascriptcssreactjsdrag-and-drop

Collapse the accordion item when a different one is selected

Check out this code snippet that's working on jsfiddle I'm attempting to add a function to close any open accordion items when another one is clicked. I've added a class "open", but I'm having trouble removing the class when a differen ...

javascriptjquerycsstoggle

Tips for navigating a dynamic viewport using scroll movement

Attempting to create a responsive page with two distinct sections at this example link including: Map View Table View Both of these views (table and map divs) need to be responsive without a hard-coded height, so the size of the map div adjusts automatic ...

javascriptjquerycss

The paragraph element is refusing to align with the next paragraph element on the following line

The issue I'm facing is that the paragraph element is not displaying on a separate line from the other paragraph element. body { margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; height: 100vh; backgr ...

htmlcss

determining the perfect size of a container by analyzing its content

Displayed here is a snapshot of content included in form validation for a website project that's currently in development: The content is currently situated within a div element with its width set to 20%. Initially, without this rule, the div spanned ...

css

Remove multiselect label in PrimeNG

I am attempting to change the multiselect label of selected items and replace it with a static default label. Here is what it currently shows: https://i.sstatic.net/qBNHG.png This is what I have tried: .p-multiselect-label { visibility: collapse; ...

javascriptcssangularfrontendprimeng

Transitioning in CSS involves animating the changing of a CSS property over

My goal with CSS is to create a transition effect with a delay that behaves differently when entering and exiting. Specifically, I want a 1 second delay when an element enters, but no delay (0 seconds) when it exits. transition: width 0.3s ease-in 1s; tra ...

csscss-transitions

How do I hide a div if its contents exceed the available space in CSS?

On mobile screens, one of my divs is displaying below the navigation bar and I want to hide it using pure CSS. Can anyone suggest a solution? I've attempted using "text-overflow: hidden;" and "overflow: hidden;" but they don't seem to be working ...

htmlcss