Ways to add more spacing between list items without affecting the position of the bottom div

I'm attempting to achieve a layout similar to an Instagram post, where the list expands but does not push the footer down. In my case, adding margin-bottom to the comment class affects the height of the 

<div class="post-details-container">
resulting in a gap.

If I increase the margin-bottom between comments, it should expand the overflow of the <div class="body> container without affecting other divs and causing a green gap as shown in the image.

For reference, here is a Jsfiddle example: https://jsfiddle.net/ou21qe09/2/

Adding more than 5px to the comment class causes expansion and leaves a green gap in the image container. Similarly, adding padding-top to the 

<div class="header">
increases the div's height, creating the same issue. Setting a max-height on the 
<div class="post-details-container">
or finding another workaround may be necessary due to variations in image size determining its height.

.comment {
   margin-bottom:10px;
}

Any suggestions on how to solve this problem would be greatly appreciated. If further clarification is required, please let me know!

htmlcss

Answer №1

By utilizing the overflow scroll property, you should theoretically be able to have an unlimited number of comments on your page. However, if this feature is not working as expected, it might be worth reconsidering the overall layout and exploring the use of flex-box for a more efficient structure: https://codepen.io/sheriffderek/pen/mMWRWY

HTML Markup:

<div class="thing">

    <div class="left">
        <img src="https://placehold.it/1600x1300" alt="">
    </div>

    <div class="right">
        <header>
            header
        </header>

        <main>
            <h2>Are there any main comments?</h2>

            <ul>
                <li>comment</li>
                <!-- ... -->
            </ul>
        </main>

        <footer class='footer1'>
            footer 1
        </footer>

        <footer class='footer2'>
            footer 2
        </footer>
    </div>

</div>


Stylus Styles:

.thing {
    display: flex
    .left {
        flex-basis: 70%
        img {
            display: block
            width: 100%
            height: auto
        }
    }
    .right {
        flex-basis: 30%
        display: flex
        flex-direction: column
        h2 {
            padding: 10px 0
            font-size: 20px
            margin-bottom: 10px
        }
        header, main, footer {
            padding: 10px
        }
        header {
            background: gray
            flex-grow: 0
        }
        main {
            overflow: scroll
            flex-grow: 0
            ul li {
                margin-bottom: 10px
            }
        }
        footer {
            background: gray
            flex-grow: 0
        }
        .footer1 {
            background: lightgreen
        }
    }


Compiled CSS:

.thing {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.thing .left {
  -ms-flex-preferred-size: 70%;
      flex-basis: 70%;
}
.thing .left img {
  display: block;
  width: 100%;
  height: auto;
}
.thing .right {
  -ms-flex-preferred-size: 30%;
      flex-basis: 30%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.thing .right h2 {
  padding: 10px 0;
  font-size: 20px;
  margin-bottom: 10px;
}
.thing .right header,
.thing .right main,
.thing .right footer {
  padding: 10px;
}
.thing .right header {
  -webkit-box-flex: 0;
      -ms-flex-positive: 0;
          flex-grow: 0;
  background: #808080;
}
.thing .right main {
  -webkit-box-flex: 0;
      -ms-flex-positive: 0;
          flex-grow: 0;
  overflow: scroll;
}
.thing .right main ul li {
  margin-bottom: 10px;
}
.thing .right footer {
  background: #808080;
  -webkit-box-flex: 0;
      -ms-flex-positive: 0;
          flex-grow: 0;
}
.thing .right .footer1 {
  background: #90ee90;
}

Answer №2

Hey, I made a quick update to your JsFiddle. Take a look here: Revised JSFiddle Link

.content {background: green;padding: 0 20px 0 20px;height: 60vh;overflow-y: scroll;}

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

What methods can I use to eliminate an iframe virus that has infected all my PHP files on my website?

I'm facing a challenge with eliminating a virus code from my php files. All 1200+ php files on my server have been infected by this malicious code, which injects the following line into the html output: Here is the virus code: <tag5479347351>& ...

phphtmliframevirustrojan

Conceal the div element if the screen size drops below a certain threshold

Is it possible to hide a div element when the browser width is less than or equal to 1026px using CSS, like this: @media only screen and (min-width: 1140px) {}? If not, what are some alternative solutions? Additional information: When hiding the div eleme ...

javascripthtmlcss

Encountered an issue with instafeed.js due to CORS policy restrictions

Trying to implement an API that provides JSON data for use in a function. Required Imports: Importing Jquery, instafeed.min.js, and the API (instant-tokens.com). <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js& ...

javascripthtmljsonajaxinstagram-api

Leveraging the combination of <Form>, jQuery, Sequelize, and SQL for authentication and navigation tasks

My objective is to extract the values from the IDs #username-l and #pwd-l in an HTML form upon the user clicking the submit button. I aim to compare these values with those stored in a SQL database, and if they match exactly, redirect the user to a specifi ...

javascriptjqueryhtmlsqlsequelize.js

Wait until the link is clicked before showing the list element

Is there a way to prevent the display of list element id="two" in the code below until link "#two" has been clicked, removing element id="one"? I am looking for a CSS or JS solution that completely hides the list element rather than just hiding it from vie ...

javascriptjqueryhtmlcss

Preventing data loss upon submitting a form (PHP)

Currently, I have an HTML file that allows users to select appointment times for specific days of the week. Once they click submit, a PHP file generates and displays a calendar with the chosen times as checkboxes. My goal is to enable users to input their ...

phphtmlformspostinput

Is it possible to use JavaScript to make a CSS animation mimic the behavior of a :hover effect?

My CSS animation looks like this: HTML: <div class="container" id="cont"> <div class="box show"></div> </div> CSS: .container { width: 100vw; height: 100vh; } .box { position: absolute ...

javascripthtmlcss

Issue with CSS Reset code causing disruption for one hyperlink

Check out the menu at this link: http://fiddle.jshell.net/V88c6/8/show/ To view the complete jsfiddle, click here: http://jsfiddle.net/V88c6/8/ Here is the HTML code: <div id="head_1"> <div class="inner"> <div class="column ...

htmlcss

Alter the background of a div in a webpage using PHP and jQuery to display a

I have a collection of 10 background images for each season (Spring, Summer, etc.) stored in folders labeled 1, 2, 3, and 4. I am looking to randomly change the div background image for each season. For example, changing the random image from folder 1 for ...

phpjqueryhtmlcss

Breaking free of the constraints of a 100% height container, UL escapes its

In both Chrome and Firefox, UL list items do not seem to adhere to the parent container's width of 100%. I attempted to use list-style-position: inside;, but unfortunately, that did not solve the issue: <html style="height: 100%"> <body styl ...

htmlcss

The Bootsrap 5.3 navbar is not fully extending to the width of the page

My goal is to have the list items in a Bootstrap navbar stretch across the width of the page in mobile view, but I'm having trouble achieving this. I've tried following various tutorials without success. I even attempted using *{margin:0;padding ...

htmlcsstwitter-bootstrapnavbarbootstrap-5

Maintain the background div while scrolling horizontally

I am facing an issue with my wide bar chart where I use iScroll to enable horizontal scrolling. Behind the bar chart, there are horizontal lines that should move along in the background as the user scrolls horizontally. The challenge is to keep the lines v ...

htmlcss

Troubleshooting a CSS problem within mat-autocomplete component in Angular 7

While using mat-autocomplete, I noticed that when I select an option from the dropdown and then scroll through the main bar, the dropdown menu does not move along with the autocomplete input field. view image here Here is the code snippet: <td width ...

cssangularjsangularmat-autocomplete

New data row successfully added to HTML table, revealing an object display

When I click a button, a dialog box opens up. I can fill out the form inside the dialog box and submit it to insert a row into a table. After submitting the form, the newly inserted row displays as [object Object] immediately after submission: It seems t ...

javascriptphphtmljquery

Stop the inclusion of the scrollbar in the mat-drawer-inner-container within the Angular mat-drawer Component

Background Story: Working on designing a screen layout that includes the use of a mat-drawer to display a custom component. The challenge arises when the custom component gets nested inside a div (with class="mat-drawer-inner-container") automatically adde ...

cssangularangular-materialmat-drawer

The appearance of the page varies between Ubuntu and Windows 7 when viewed on Firefox 31

This situation is completely new to me: The page I designed appears differently on Firefox 31 in Ubuntu (correct): compared to Windows 7 (wrong): I was able to replicate this issue on another Windows 7 machine using FF 31. My HTML and CSS both validate w ...

htmlcss

I am attempting to build a party planning website but I am encountering an issue where the output is not generating properly. Whenever I click on the submit button, the information I input

I am struggling to create a party planner website and encountering issues with the output. Whenever I click on the submit button, the form just clears out without any feedback or result. Here is what the expected output should be: Validate event date 1: ...

javascripthtml

How to retrieve an array value within a function in AngularJS

<select class="form-control" id="column" ng-model="selectedcolumn" ng-options="column for column in columns"></select> <input type="text" ng-model="test[selectedcolumn]" ng-change="search()" /> Is there a way to retrieve the value o ...

javascriptangularjshtml

Issue with creating a new jstree node

I recently put together a basic jstree. When I click on a link, it triggers the createNode() function. This function utilizes the create feature from the API to generate a new node. It appears to be a common issue with jQuery that I am encountering. Any ...

javascriptjqueryhtmlcssjstree

Tips for retrieving data from an Excel spreadsheet on an HTML/CSS webpage

I have a single HTML template at this location: . The current page is tailored for the state of Arkansas in the US, but I now need to replicate the design for all 50 states. Each state page will have the same layout, but different content specific to that ...

javascriptphphtmlcssasp.net