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

Changing the size of an image in an HTML5 canvas

I have been attempting to generate a thumbnail image on the client side using Javascript and a canvas element. However, when I reduce the size of the image, it appears distorted. It seems as though the resizing is being done with 'Nearest Neighbor&apo ...

javascripthtmlcanvasimage-resizing

Creating a custom jQuery plugin for exporting data

I am crossing my fingers that this question doesn't get marked as 'already answered' because I have thoroughly searched previous questions and unfortunately, my specific case is not listed anywhere. I have successfully created a jQuery func ...

javascriptjqueryhtmlfunction

Guide to setting the ng-selected value within AngularJS

I am currently working on a project where I have a select element in my AngularJS application. I am populating the options using JSON values with ng-repeat, and I want to display the first value from the JSON as selected by default. I have tried two diffe ...

htmlangularjs

Using JavaScript and HTML to show the current month, date, and year on a webpage

I am looking to display not only the time, but also the month, date and year. My attempted solution involved creating variables for the month, day and year, and then using getElementById. Here is an example of what I tried: var d = date.getDay(); var mn ...

javascripthtmldate

Turn off the CSS hover effect for a custom button if the ng disabled attribute is set to true

My goal is to disable custom buttons, and the disable(pointer) function is working correctly. The issue arises when we try to hover on the button, as the hover effect still works. I therefore need to disable hover as well. I am looking to apply ng-disabl ...

jqueryhtmlcssangularjs

Are you searching for the origin of a dynamic dropdown widget or database?

Currently, I am browsing through and I have a query regarding accessing all available classes/options for the courses in a semester. There is a class locator on the top left of the page with a dynamic drop-down menu. Can anyone suggest how I can access ...

javascripthtmldatabase

Typescript tutorial: Implementing a 'lambda function call' for external method

The Issue Just recently diving into Typescript, I discovered that lambda functions are utilized to adjust the value of this. However, I find myself stuck on how to pass my view model's this into a function that calls another method that hasn't b ...

javascripthtmlknockout.jslambdatypescript

How to Use CSS to Align an Image in a Header

I'm struggling to position an image on the top right corner of my page, specifically in the header. Despite searching for help on Stack Overflow and other online resources, I can't seem to figure it out. Currently, here is what I have: The seco ...

htmlcss

Smooth transitions between points in animations using the D3 easing function

I'm working on an animated line chart that displays data related to play activities. I've been experimenting with changing the animation style between data points on the chart using d3.ease Currently, my code looks like this: path .attr("stro ...

javascripthtmld3.js

Modifying Ajax-injected HTML with JQuery's editInPlace functionality

I have been successfully using the JQuery editInPlace plug-in on a static HTML page. However, I am facing an issue when trying to use the same plugin with HTML injected via an Ajax call. I have heard that using .on() like '$('.edit_inplace_fiel ...

jqueryhtmlajaxinject

Convert the easeInExpo function from jQuery easing to vanilla JavaScript and CSS

Currently, I am in the process of converting a piece of code from jQuery to plain JavaScript and CSS. The specific code snippet I am focusing on involves creating easing functions without relying on jQuery. const customEasing = { easeInExpo: function ( ...

javascriptjquerycss

What is the best way to format or delete text enclosed in quotation marks within an anchor tag using CSS or JavaScript?

I have encountered an issue with a dynamically generated login form. When I select the 'Forgot Password' option, a new 'Back to Login' message appears along with a separating '|' line. Removing this line is proving challenging ...

javascripthtmlcss

Rotate image in Vue3 using @click

I have a dashboard with a refresh button that I want to rotate 360 degrees every time it is clicked. How can I achieve this rotation effect on the image with each click of the refresh button? Below is the code snippet I have been working on, but it only r ...

javascriptcssvue.jsvuejs2

Extracting information from console output and displaying it in a table with angular2

https://i.stack.imgur.com/BMt6J.pngI am facing an issue with retrieving data from the console output and populating it into an HTML table. Can someone please assist me with this? Here is the HTML Code: <table class="table"> <tr> <t ...

htmlangulartypescript

Troubleshooting: Django project not functioning properly post transfer from Windows to Mac

Using Django 3.1.7 on a MacBook Pro now, I recently moved the Django project from a Windows 10 machine. Despite setting up the database and superuser again, running pipenv sync didn't result in serving any of my URLs or Admin page CSS styles. The serv ...

cssdjangodjango-admindjango-3.1

Enhancing your website's design with dynamic CSS variables using JavaScript

Is there a way to update CSS variables specifically scoped under a certain CSS class (or even other complex CSS selectors) that are predefined in a stylesheet? This question extends beyond just CSS variables and includes other CSS properties as well, quest ...

javascripthtmlcssdomcss-variables

What is the best way to align an InputAdornment IconButton with an OutlinedInput in Material-UI?

Struggling to replicate a text input from a mockup using Material-UI components. Initially tried rendering a button next to the input, but it didn't match. Moving on to InputAdornments, getting closer but can't get the button flush with the input ...

javascriptcssreactjsuser-interfacematerial-ui

Reduced complications with mixin scopes

I have developed a parametric mixin that utilizes a unique "node-value" system to locate the children of an element. The process involves detecting the children through a loop function named ".extractArrays", which contains ".deliverChild" within it. Subse ...

csslessfrontendmixins

Is there a method to incorporate scss into a project without requiring a separate stylesheet?

I am currently working on a Gatsby application that utilizes SCSS. My code snippet looks like this: import React from "react"; import styles from "./mosaic.module.scss"; import Tile from '../tile/tile'; const Mosaic = (): JSX.Element => ( ...

cssreactjssassgatsby

Using a gogocartojs map in your JavaScript project

I have created a new project and am attempting to integrate gogocartoJs into it. While the project itself is functioning properly, I am experiencing issues with the map not displaying as expected. Although I have followed the provided guides, there seems ...

javascripthtmlnpm