Trying to figure out how to set a div in HTML and then have a second div take up the remaining space. It seems like it should be simple, but I'm struggling with it.
I'd like to have a div with a fixed height and then have another div take up the rest of the space, kind of like this:
<div class="div1">1st</div>
<div class="div2">2nd</div>
CSS:
div.div1{background: #999; height: 78px;}
div.div2{ background: #666; height: (remaining_space); }
Is this doable?
From what other SO users have mentioned, it seems that achieving this purely with CSS in a cross-browser manner is not feasible. Even though your question didn't include the javascript tag, I will propose a solution using jQuery.
$(document).ready(function() {
var docHeight = $(document).height();
var div1Height = $('.div1').height();
var div2Height = docHeight - div1Height;
$('.div2').css('height', div2Height);
});
Currently, achieving this with CSS alone in a way that is compatible across all browsers is not possible. JavaScript will be necessary to make it work consistently on all web browsers. For those looking to push boundaries and focus solely on modern browsers, exploring features like IE10's grid layout could be an option.
Consider using the CSS property position: absolute, along with setting the height of the top div to, for example, 100px, and aligning the top of the bottom div to the same value:
Here's a simple HTML structure:
<div class="div1">1st</div>
<div class="div2">2nd</div>
The corresponding CSS styles are as follows:
div.div1, div.div2 {
position: absolute;
left: 0;
right: 0;
outline: solid 1px #ccc; /* border for visibility */
margin: 5px; /* spacing for visibility */
}
div.div1 {
height: 100px;
top: 0;
}
div.div2 {
top: 100px;
bottom: 0;
}
No JavaScript is required to achieve this layout!
If you'd like to see a demo, check it out here.
Looking to implement a custom keyboard for UIWebView that is entirely based on HTML/JS/CSS for compatibility across multiple devices. To achieve this, I included a notification as shown below: [[NSNotificationCenter defaultCenter] addObserver:self selecto ...
I've been working on a project where I'm trying to replace the default browser cursor with an SVG one using jQuery. Everything seems to be working smoothly, except for changing the cursor when it hovers over links - nothing I've tried so far ...
I am currently working on a script that dynamically displays your username in the Login button as you type it. However, I have encountered an issue where the password is also being displayed, which is unacceptable. Additionally, I would like to enhance my ...
Currently, I am in the process of learning angular and have implemented a radio button feature in my program. However, I have encountered a perplexing issue that I cannot seem to explain. <!DOCTYPE html> <html> <head> <meta ch ...
HTML <ol> <li>item1 <ol> <li>item2</li> </ol> </li> <li>item1 <ol> <li>item2</li> <li>item3</li> </ol> </li> </ol> SC ...
Check out this HTML code snippet: div { border: 2px solid red; height: 50vh; width: 50vw; } table { border: 1px solid; table-layout: fixed; } <div> <table rules="cols"> <tr> <th>Name</th> < ...
During my testing of the blacklist confirmation dialog, I encountered an issue where clicking the OK button did not submit the form as expected. Instead, it seemed to be stuck in a loop where clicking the button had no effect and the dialog remained on scr ...
I have taken on the task of educating my younger sister about programming, and we collaborated on creating this project together. Nicki Minaj Website However, we encountered an issue where the background image does not fully cover the screen when using b ...
Inconsistencies between Chrome and Firefox have been noticed in the following example. While the footer height is set to height:40px and appears fine in Chrome, it seems smaller in Firefox, around 35px. Any specific reasons for this difference? Link to t ...
I've been attempting to insert a Twitter logo into the header of my website (which is styled using Bootstrap CSS), but unfortunately, it's causing some alignment issues. My initial goal was to position them next to each other, however, they ended ...
After working on the Skeleton Framework and making adjustments to the grid design, I am facing a small gap issue on the right side. Despite things slowly falling into place, this minor gap is causing confusion. Please refer to the image below for clarifica ...
I am facing an issue with a select element wherein a basic (change) handler is attached along with an ngmodel. Whenever an <option> with a ng value is set, the change handler triggers before the [(ngModel)] reflects the new values. <div> ...
My website uses owl carousel to display images fetched through PHP. The challenge is that the number of items is unpredictable, and sometimes there are fewer images than the default 10. As a result, the images align to the left instead of being centered. H ...
Is there a way to format the details information so that it aligns underneath the summary tag? Currently, both lines of text are aligned to the left. <details> <summary> Summary 1 </summary> Details 1 </details> ...
Is there a function or method to trim a path that extends beyond the viewbox rather than simply concealing it? I am currently using svg-edit, which has a specific viewbox or canvas area. Any elements drawn outside of this canvas remain hidden. However, wh ...
One of the functionalities I am working on for my website involves allowing users to submit a single piece of information, such as their name. Once they input their name, it is sent to the server via a post request, and in return, a unique URL is generated ...
I'm trying to create a layout with 3 <div> elements in one horizontal line, each with a width of 33.33%. When hovering over one div, I want its width to expand to 50% while the other two shrink to 25%. <div id="A"></div> <div id= ...
Hello everyone, After attempting different approaches in numerous ways, I have turned to the experts here who are sure to have the answer to this simple problem. The issue at hand is that when I try to apply background images and other properties to the ...
Here is a jsbin that demonstrates the issue and here is the markup: <div class="row"> <div class="col-sm-4 xs-12"> <strong>UK Postcode</strong> </div> <div class="col-sm-4 xs-12"> <strong>Other Fie ...
[view image 1[view image 2] Image 1: Normal View, Image 2: When the keyboard is enabled, the card jumps up and when I close it's normal. Is this behavior normal? Or is there a fault in my CSS? I utilized styled-components for writing the CSS. CSS ...