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.
Trying to create a responsive grid of images that adapts to changes in browser size. Is there a way to achieve this using a list? Ideally, I want the images to be evenly spaced in rows. For example, if there are three rows of four images on top and one r ...
I am having trouble setting default selected values for the multi-select. Despite trying various methods such as initializing the ngModel to bind the variable and using [selected] = "selectedSegment == 'S1'", none of them seem to be effective fo ...
My question was previously posted here: Xpath pulling number in table but nothing after next span In testing, I successfully located the desired number using an XPath checker plugin in Firefox. The extracted results are displayed below. Although the XPa ...
In my CS 205 class project, I am tasked with creating a website. To accomplish this, I used Notepad++ for the HTML files and Notepad for the CSS files. The site consists of an index.html page along with other content pages, each designed separately in Note ...
I am currently developing an application using AngularJs and Bootstrap. My goal is to display the title of a 'scenario' with different styling based on its status, along with a specific icon. Initially, I attempted the following approach: <s ...
I am currently trying to troubleshoot an issue with a bootstrap theme. It seems to be working perfectly on all browsers except for ios safari browsers. Whenever I click on an input field or button, the page suddenly zooms in. It's quite frustrating. ...
Possible Duplicate: read XML tag id from php How can I retrieve data from a specific div ID using PHP? I want to extract data from a div with the ID of <div id="content">, so that all the content within that div can be stored in a variable. Alt ...
When working on my web app, I faced an issue with a fixed div modal that takes up the entire screen. The problem is that the scrollbar for this modal is not visible, only the body scrollbar can be seen. It seems like the fixed div's scrollbar is posit ...
If anyone has a solution for printing content in a div using JavaScript and CSS, please help. The main div with the id 'preview' contains content taken from a database using PHP and MySQL. However, the data on the print page appears vertically an ...
I am currently attempting to customize the background color and text color for specific HTML components. Within my project, there are 3 navigation bars. I aim to establish a default color for all nav bars while also altering the specific color of one of t ...
Currently, I am facing an issue with a checkbox filter on a product page that I'm developing. The filter is functioning correctly, but I encounter duplicate results when an item matches multiple criteria. For instance, if I select both 'Size 1&ap ...
After reviewing the official Bootstrap grid layout page, I noticed numerous examples of alignment. I am eager to find a class that will help achieve a layout similar to the one shown in https://i.stack.imgur.com/OPYrZ.png. I want all content in the first ...
From what I've learned, MUI 5 utilizes Emotion for its styling framework. Emotion offers a convenient helper function called css, which generates a string - a class name that can be used as a value for the className property or any other relevant prop ...
I need to update the class name in my image tag <img src="img/nex2.jpeg" class="name"> When hovering over with jquery, I want to add a new class to it. After hovering, the tag should appear as follows: <img src="img/nex2.jpeg" class="name seco ...
After diligently following the provided instructions, I managed to get cesium running locally. I then attempted the hello world example as shown: However, despite clicking on "open in browser," I couldn't see anything. It has been a constant struggl ...
I have some HTML data that was saved from a text editor, <p style=\"font-size: 14px;text-align: justify;\"> <a href=\"https://www.xpertdox.com/disease-description/Chronic%20Kidney%20Disease\" style=\"background-color: tr ...
I've been diving deep into research on this topic, but I can't seem to find a straightforward answer to my specific query. My main focus is understanding the inner workings of how video players transition between different quality settings (480p, ...
I found this interesting JS code snippet: ;(function ($) { $('.filter-opts .opt').click(function(){ var selectedName = $(this).html(); $('.append').append('<li>' + selectedName + '</li> ...
Currently, I am facing an issue with my line chart having 2 datasets filled with gradients that overlap, causing a significant color change in the 'bottom' dataset. Check out my Codepen for reference: https://codepen.io/SimeriaIonut/pen/ydjdLz ...
At present, the checkboxes in my application are quite basic with labels. However, our app designer has requested that we revamp this feature and make it more appealing by using clickable images that still function like checkboxes. Allow me to provide an ...