Limit the maximum height of a list within a fluid-width content container

I came across this link

The layout works fine when the elements are limited in the #commentWrapper, but adding more items pushes everything downwards. Copying additional <li>test</li> items clearly demonstrates the issue. I want the input box to stay at the bottom like it is now and switch to "overflow-x:auto" mode when the list becomes too long. Adding a fixed height disrupts the fluidity of the design, so any suggestions on CSS or HTML solutions would be appreciated. Should I consider using JavaScript for this? I do have jQuery available if needed.

jqueryhtmlcssheightfluid-layout

Answer №1

@Bogdan's solution is effective due to the use of "height: 100%;" in conjunction with "position: absolute;". It is important to consider the specific layout you are trying to create and which browsers you need to accommodate.

For information on browser support for various CSS properties, take a look at the website caniuse.com.

Answer №2

To achieve this effect, you can utilize pure CSS in this scenario. By implementing the following styles to the #commentWrapper element, you will be able to accomplish the desired outcome:

#commentWrapper {
    width: 20%;
    height: auto;
    position: fixed;
    top: 0;
    right: 0;
    box-sizing: border-box;
    padding-bottom: 15px;
    overflow-y: scroll;
}

You can view a working demonstration on jsfiddle by visiting the following link: http://jsfiddle.net/8C77R/4/

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

Contact on the go with our handy mobile contact form

Having some difficulties with the contact form on my website. The link to the form is: here. I am currently working on making the form mobile-friendly (the rest of the site scales down using @mobile screen tags in the CSS). The form is stacked, so there ...

htmlcssforms

What is preventing FancyBox from functioning properly?

Seeking assistance in implementing FancyBox for an e-commerce website I am developing for a client. Despite trying various tutorials and troubleshooting steps over the course of three days, I have been unable to get it to function properly. Not encounterin ...

jqueryhtmljquery-pluginsfancyboxfancybox-2

Create a pagination system in CodeIgniter for displaying data

Having trouble implementing paging in the search functionality of my result table. I want to display just 10 rows but can't get it to work properly. I tried reading about Pagination on https://codeigniter.com/, but I'm still struggling to unders ...

phphtmlcodeigniterpagination

The issue of jQuery sliding banner not working properly when trying to clear the interval on mouseover

I recently created a dynamic banner using jQuery that slides images smoothly. However, I encountered an issue when attempting to implement the .mouseover() function to pause the sliding whenever the mouse hovers over an image. Unfortunately, this feature ...

jqueryslidebannerclearinterval

How can I eliminate a class when the scrollTop() position matches a specific div element?

I am trying to implement a script that will allow me to scroll to my navigation and then change the class of the navigation, however, it is not working as expected. $(window).scroll(function() { if ($(window).scrollTop == $('.menu_nav').offs ...

jquerycss

How can you ensure an element's height matches its width within an Ionic framework?

I am currently creating an application using the Ionic framework, and I am looking to set a square image as the background. The challenge is to ensure that the image scales appropriately for different screen resolutions; ideally, it should occupy the full ...

javascriptcssangularjsangularjs-directiveionic-framework

Efficient utilization of the bootstrap form-group for optimal responsiveness

I've encountered an issue with the form-group class in Bootstrap. You can view the problem on this link. After analyzing the problem, I found that when viewing the code on a small or medium-sized device, the space between "Statut" and "Etat" appears ...

htmlcsstwitter-bootstrap

Utilizing Flexbox for Creating Horizontally Aligned Boxes with CSS

My goal is to arrange the explanation and participation sections as flexboxes, positioned side by side. Below them, I want the benefits and requirements sections stacked on top of each other. I have attempted to use flex-direction:row; for the explanation ...

htmlcssflexbox

Getting rid of all CSS properties currently set for the Mobile view

Utilizing third-party library components in my project. The library includes components that come with predefined styles for mobile devices. I am seeking to completely UPDATE these properties within my own code. When I say "update," I mean removing all th ...

css

Explore the world of HTML by uncovering both the tags and

I am currently focused on enhancing a table I created to allow sorting rows in both ascending and descending order, as well as the ability to rearrange columns through click-and-drag functionality. While the basic structure is working, I am seeking to refi ...

jqueryhtml

Tips for designing a unique mosaic using flex technology

I am attempting to design a unique mosaic layout using flexbox that resembles the image provided: https://i.sstatic.net/jrHvb.jpg Each box should have a width equivalent to one-third of the parent container, except for box 4 which needs to be double the ...

htmlcssflexbox

Retrieve the current date and time data from the database and populate it into a datetime input field

I've encountered an issue while trying to fetch a Datetime value from my database and insert it into an html input with a date type. Unfortunately, the input field appears empty. $resQuery = mysql_query("SELECT * FROM reserveringen WHERE id = $ID"); ...

phphtml

changing size when hovered over with the mouse is not consistent between entering and exiting

Hi there, I'm currently utilizing the transform: scale(); property on a website and could use some assistance with a particular issue I haven't been able to find an answer for online. Here is the code snippet I'm working with: HTML: <d ...

javascriptcsstransform

What are some techniques for ensuring a CSS div remains stable and intact when adjusting the browser size?

Is there a way to prevent the entire website from resizing when you minimize or maximize your browser? I want the website size to adjust in proportion to your resize without reorganizing everything. How can this be achieved while maintaining the site lengt ...

javascriptcss

Exploring VueJS templating: Loading external templates

Being new to Vue.js, I have some experience with AngularJS where we used to load templates like this: template: '/sometemplate.html', controller: 'someCtrl' My question is how can we achieve something similar in Vue? Instead of embeddi ...

javascriptjqueryangularjsvue.js

When utilizing the "as" attribute, styled components do not inherit any styles

I am currently utilizing both styled-system and styled components, working on a simple scenario like the one below: const buttonFont = { fontFamily: "Chilanka" }; // define basic text styling const Text = styled.div` ${typography} ${color} `; // c ...

cssreactjsstyled-components

` `Spinning graphics and written content``

I am looking to create a dynamic element on my website where an image and corresponding text block rotate every few seconds. An example of what I am envisioning can be seen on this website: While I know how to implement a javascript for rotating images, I ...

phpjavascripthtmlcss

How can CSS be utilized to style the visited links that are hovered over

Is there a way to change the font color specifically for visited hyperlinks that are being hovered over by the mouse? I am trying to achieve this: a:visited:hover {color: red} ...

htmlcssstylesheet

Animate the entrance of mobile content as it slides into view while scrolling

I am currently working on a WordPress theme and facing an issue: When I click the hamburger menu without scrolling down the page, the mobile menu slides in smoothly. However, if I scroll down the page, the mobile menu fails to slide into view (I have to s ...

css

Icons will be displayed when hovered over

Is it possible to display icons on hover in a div and hide them otherwise using just CSS? Or do I need to use javascript for this function? Thanks in advance! Example: HTML: <div id="text_entry"> <p>Some text here</p> <span ...

jqueryhtmlcss