Seeking assistance to adjust the height of the final list item to 100% in order to match the varying height of the right-floated div.
ul.menu li:last-child {height:100%}
Here is an example of my current situation:
Any help would be greatly appreciated!
Although achieving what you're looking for is possible, in my opinion, finding an elegant solution using current CSS is quite challenging. Here's a workaround that partially addresses the issue.
In order for the list to be responsive to the size of the floated element adjacent to it, both elements must be enclosed within the same container:
<div id="container">
<ul class="menu">
…
<li>…</li>
</ul>
<div id="floated">…</div>
</div>
To ensure the container adjusts to the size of the floated element inside it, the container also needs to float:
#container {
float: left;
}
To prevent the next sibling element from floating alongside the container (unless cleared with the clear property set to left or both), a clear fix may be required after it:
<div id="container">
…
</div>
<div style="clear: both; width: 0; height: 0; line-height: 0"><!-- for MSHTML --></div>
<!-- insert next sibling here -->
To align the lower boundary of the list item with the bottom of the floated element, the list item should be positioned absolutely:
ul.menu li:last-child {
position: absolute;
bottom: 0;
}
Furthermore, the container should have relative positioning to ensure the bottom: 0 of the li element aligns accurately with the bottom of the floated element:
#container {
position: relative;
float: left;
}
If precise coordinates are required for the last list item, considering the total space occupied by preceding items might offer a solution:
ul.menu li:last {
position: absolute;
/* your specific case */
left: 0;
/*
* Assuming: 3 items above, each with a computed height of 1em, no margins in between.
*/
top: 3em;
bottom: 0;
}
Ensure the ul element is not positioned to maintain accurate li placement details.
In conclusion, the necessary CSS styling would entail:
#container {
position: relative;
float: left;
}
/* As per your original code */
#container #floated {
float: right;
}
#container ul.menu li:last-child {
position: absolute;
/* see above */
left: 0;
top: 3em;
bottom: 0;
}
And the corresponding HTML markup:
<div id="container">
<ul class="menu">
…
<li>…</li>
</ul>
<div id="floated">…</div>
</div>
<div style="clear: both; width: 0; height: 0; line-height: 0"><!-- for MSHTML --></div>
<!-- add next sibling content here -->
This method functions correctly in Chromium 22, yet it lacks aesthetics. Reflect on why stretching the last list item is imperative and perhaps consider alternative approaches, such as expanding the entire list layout instead.
You may need to set the height of html and body elements to 100%
Consider adding the following code:
html, body, section {width:100%; height:100%;}
Attempting to retrieve data from a JSON file (response.json) hosted on localhost:8000/response.json. Below is the code snippet from pages/test.js: import React from "react"; import Link from "next/link"; import Image from "next/ima ...
Is it possible to create a complex UI using multiple HTML files with ui-view in AngularJS? I am trying to achieve a layout similar to this: I attempted to implement something on Plunker, but it seems like I'm struggling to grasp the underlying concep ...
Is there a way to handle null values returned by document.getElementById in JavaScript without adding if statements or checks to the code? I'm looking for a solution that allows the execution of subsequent JavaScript calls even after encountering a nu ...
In my project, I am using a mock array to distribute data. One part of the project utilizes this data to display a list of cases, each with assigned images. When a case is hovered over, the images associated with that case are displayed one at a time, with ...
Hello there, I've been tasked with editing a website for a client, but the site is located on a local web server and was designed using aspx. As I review all the files, I am encountering difficulty finding the HTML code associated with runat=server w ...
Is there a way to display JSON in a formatted view on my html page? The JSON data is coming from a database and I want it to be displayed neatly like the following example: { "crews": [{ "items": [ { "year" : "2013", "boat" ...
I am currently working on creating an SVG text box using the amazing Raphael library. The content inside this text box comes from a dynamic string that is extracted from an XML document. There are times when this string turns out to be longer than the can ...
Exploring an animation using CSS transitions and jQuery has been my recent project. The concept involves presenting the user with clickable divs to load a new page. When a div is clicked, it expands to cover the entire screen and transition to the next pag ...
I have a somewhat peculiar question. I'm currently experimenting with Javascript for a plugin and came across an interesting scenario. Let's say I have an input element that is structured like this: <input type='cc' id='cc&apo ...
I have successfully integrated icon fonts into my simple web page. Check it out on jsFiddle here My design is similar to this example, but instead of bars, I see a snake icon displayed. How can I fix this issue with the fonts? Here is the code snippet: ...
I am attempting to dynamically change the color of a tabulator cell based on its input. My initial approach was to simply try changing the cell's color. After running the following code, here is what I observed: function testFormatter(cell, formatt ...
Incorporating HTML into PHP using heredoc methodology can sometimes lead to challenges when trying to retrieve user input variables. Attempting to access the input variable with $_GET["input"] may result in an error message indicating an undefined index: ...
Imagine having a large number of <img> tags all with the same src value, like this: <img src="https://something.com/images/myimg.png" alt="" /> <img src="https://something.com/images/myimg.png" alt="" /> <img src="https://something.co ...
I am attempting to extract all URLs that have id='revSAR' from the provided HTML tag using a Python regex: <a id='revSAR' href='http://www.amazon.com/Altec-Lansing-inMotion-Mobile-Speaker/product-reviews/B000EDKP8U/ref=cm_cr_dp ...
Currently, I am utilizing jQuery to create a straightforward website. The main page is called 'index.html' and it has the capability to load different content (such as 'info1.html' or 'info2.html') through jQuery ajax requests ...
Check out my website: I've noticed that the background image appears blurry on my screen, despite its size being 1920 x 1080 px. I've tried using a jquery script to manage this background issue as all of the CSS methods have provided unsatisfact ...
UPDATE: I am seeking a way to embed an HTML file with JavaScript or jQuery that can directly access the contents of the SD card while being opened in a browser. Currently, I have posted code for accessing it through an activity, but I want to be able to d ...
My page includes a fixed menu with various sections, each assigned a specific class name using data attributes (e.g. data-menu="black"). I want the fixed menu to change its class based on the section that is currently underneath it as the user scrolls. Y ...
I found this code example here and decided to implement a collapsible panel using css/html/javascript: function toggleCollapsibleSectionWithAnimation() { this.classList.toggle("collapsible-active"); var buttonId = this.id; var sectionId = buttonId ...
Seeking help to modify the color of my menu elements upon clicking on the "center" or "right" containers (reverting back when clicked again). Currently, the three lines in my menu are white, but I desire them to turn red when either of these containers is ...