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%;}
I am currently working with a set of XML files that are linked to XSLT files for rendering as HTML on a web browser. Some of these XML files contain links that would typically trigger an AJAX call to fetch HTML and insert it into a specific DIV element on ...
Can someone help me with the error I am encountering where $ is unidentified when using onload on my page? This is a simple sample page created to call a function after the page has loaded. Jquery Code $(document).ready(function(){ alert("loaded"); }) ...
I have a contentEditable DIV that I manage using the directive below: <div class="msg-input-area" [class.focused]="isMsgAreaFocused" contenteditable [contenteditableModel]="msgText" (contenteditableModelChang ...
Trying to display a map upon clicking a button is proving challenging for me. It appears that the function NavController.push() does not work as expected, while NavController.setRoot() does. Despite not encountering any errors, I am unable to identify the ...
I'm struggling to incorporate my scope attributes into a template function within my custom directive. The formatting for the return section in my template is not working as expected. This is how it currently looks: angular .module(' ...
I'm struggling to incorporate a static file into my CSS as a background image for my website. The static URL is functioning properly when tested in HTML, but it's not working when implemented in CSS. HTML: {% extends 'base.html' %} { ...
Just joined this site and I'm new to coding, eager to learn more. I'm trying to make the border of this grey box grey, with the rest being blue. I've searched online but can't find exactly what I need. The grey area is 200px wide and ...
After successfully adding Helmet to my Node/Express/EJS project and configuring my CSP to allow inline scripts, styles, and certain external sources on my Windows laptop in Opera, Chrome & Edge, I encountered a problem when connecting via iOS Safari on mob ...
I have created a GWTP web application and am making AJAX calls to a JSP page on a different domain (Cross domain) from the GWT client side. Most of the time, the CSS files are linking correctly and working fine. However, occasionally they do not link prop ...
Currently, I am utilizing the jQuery navigation menu from ApyCom. Everything seems to be functioning properly except for one issue. Whenever I click on a different navigation element, I expect that element to remain highlighted in order to indicate to the ...
Styling with CSS: #logo-container { position: fixed; right:5px; .home-page { /* homepage styling */ } .content-page { /* Modify the $element's class to this class */ margin-top: 78px; } } Using JQuery to change the class of #lo ...
How can I create a button on an HTML page that will launch an Excel application when clicked by the user? <button class="btn btn-primary" onclick="window.open('excelApplication.url','_blank')">Launch Excel</button> ...
I am looking to achieve a specific layout for my website. https://i.stack.imgur.com/dKT52.jpg Here is what I have attempted: <h2>Make search awesome using Open Source</h2> .banner .section_title h2 { font-family: "Oswald", Arial, sans- ...
Is there a way I can implement an if condition in my HTML file within Codeigniter that checks the URL? Depending on whether or not it contains part of the URL, it would perform different actions. For instance: The initial URL is localhost/index.php/ca ...
I have not been using jQuery, JavaScript, and HTML to create a list of products. The task I am working on now is the ability to select multiple items from this list. Currently, the HTML list is dynamically populated with <li> elements using JavaScri ...
In the process of developing a PHP-Script, I am tasked with assigning HTML code to various templates. PHP-File: $smarty->assign("PLACEHOLDER", getCode()); $smarty->display('index.html'); function getCode(){ return "{literal}some co ...
Currently, I am in the process of developing a website that allows users to input width and height parameters within an HTML file. The idea is to use JavaScript to take these user inputs and generate a pop-up window of a custom size based on the values pro ...
This is my current code snippet: async function main(){ for(int=0;int<50;int++){ const allLinks = await getLinks(); //console.log(allLinks); const browser = await puppeteer.launch({ headless: true }); const page = await browser.newPa ...
Currently engaged in an XML and XSLT project with a challenging task; the query requires me to count the number of open ports with a specific port number using the following path: liste_hotes --) hote --) liste_ports --) port num_p ...
I have a pair of SVG icons that I am working with. Recent Update: Icon One Icon Two One question that I have is whether it is possible to create both icons using the same HTML markup? For instance, can I use something like: <g> <circle ... ...