chrome side column must be set to 100% height

Having trouble with setting height to 100%.

I have a list of items that need to be distributed to match the height of the side image. It works fine when I use a fixed height, but not with a percentage.

The issue arises because the website is responsive and I cannot set a fixed height since the image isn't fixed.

Here's the code snippet:

<!DOCTYPE html>
<html>
    <head>
        <title>testing flex box</title>
        <style>
            html,body {
                min-height: 100% !important;
                height: 100%;
            }

            body { margin: 0 }
            * { box-sizing: border-box }
            .container {
                width: 600px;
                margin: auto;
            }
            .row {
                clear: both;
                margin: 0 -15px;
                overflow: auto;
            }
            .lateral, ul {
                width: 50%;
                float: left;
                padding: 0 15px;
            }
            img {
                width: 100%
            }
            ul {
                list-style: none;
                margin: 0;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                height: 356px; /* works */
                height: 100%; /* not working */
            }
            ul li {
                height: 50px;
                background: darkred;
            }
        </style>
    </head>
    <body>
        <div class='container'>
            <div class='row'>
                <div class='lateral'><img src='https://placeholdit.imgix.net/~text?txtsize=33&txt=285%C3%97356&w=285&h=356'></div>
                <ul>
                    <li>item 1</li>
                    <li>item 2</li>
                    <li>item 3</li>
                    <li>item 4</li>
                    <li>item 5</li>
                </ul>
            </div>
        </div>
    </body>
</html>

Any insights on what might be causing this issue? Thank you.

Answer №1

Check out this code snippet:

  <!DOCTYPE html>
    <html>
<head>
    <title>Testing Flexbox Layout</title>
    <style>
        html,body {
            min-height: 100% !important;
            height: 100%;
        }

        body { margin: 0 }
        * { box-sizing: border-box }
        .container {
            width: 600px;
            margin: auto;
            position: relative;
        }
        .row {
            clear: both;
            margin: 0 -15px;
            overflow: auto;
            position: relative;
            height: auto;
        }
        .lateral, ul {
            width: 50%;
            float: left;
            padding: 0 15px;
        }
        img {
            width: 100%
        }
        ul {
            list-style: none;
            margin: 0;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            height: 100%; /* not working */
            position: absolute;
            right: 0;
        }
        ul li {
            background: darkred;
        }

        .clearfix:after {
            clear: both;
            content: ".";
            display: block;
            height: 0;
            visibility: hidden;
        }
        .clearfix {
            display: inline-block;
        }
        .clearfix {
            display: block;
        }

    </style>
</head>
<body>
<div class='container clearfix'>
    <div class='row'>
        <div class='lateral'><img src='https://placeholdit.imgix.net/~text?txtsize=33&txt=285%C3%97356&w=285&h=356'></div>
        <ul>
            <li>item 1</li>
            <li>item 2</li>
            <li>item 3</li>
            <li>item 4</li>
            <li>item 5</li>
        </ul>
    </div>
</div>
</body>
</html>

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

The output of new Date() varies between app.js and ejs

app.get("/test",function(req,res){ var d = new Date(); res.send(d); }); When I access mydomain/test, it displays the output "2019-03-19T04:50:47.710Z" which is in UTC. app.get("/testejs",function(req,res){ res.render("testejs");}); Below is the content ...

Trouble encountered when attempting to download PDF using jQuery

I have encountered an issue while trying to download a PDF using Ajax response HTML. Here is the code I am using: var newPDFAction = function () { $.ajax({ type: "post", url: '{{ route("admin.getCustomerSalesRepTota ...

Add content or HTML to a page without changing the structure of the document

UPDATE #2 I found the solution to my question through Google Support, feel free to read my answer below. UPDATE #1 This question leans more towards SEO rather than technical aspects. I will search for an answer elsewhere and share it here once I have th ...

Should I use several if get statements on one page, or spread them out across multiple pages in PHP structure?

After working with PHP for a few years, one of my ongoing dilemmas is how to best structure my pages. Should I follow the current approach: if(getValue('action') == "jobsFilter" && getValue('jobType') == "open") ...

What is the best way to select a clicked span element within a div using JQuery and then adjust the spans before and after it

<div> <span>A</span> <span>B</span> <span>C</span> <span>D</span> </div> If a user clicks on one of the spans within the div, I want to apply styles (such as text color) to that span and all prec ...

Place an element in a higher position than a slideshow

I recently encountered an issue where I was trying to place a png image above my slideshow. Despite trying various solutions, the image always appeared behind or on top without transparency. Based on the erratic display, it seems like the problem might be ...

Disable the "top" property for the Material UI Drawer component

I'm currently working on implementing a Persist Left Drawer from Material UI that slides in from the left side. However, I don't want the drawer to cover the entire left side of the page. Essentially, I want to remove the "top" style property men ...

Please submit the form to log in with your credentials

Here is the HTML code snippet for a form where users can enter their username and password to log in: <form Name ="form1" Method ="POST" ACTION = "userlogin.php" id="form1"> <div id="main_body" class="full-width"> <label>User ...

Tips for automatically incorporating animation upon page initialization

I'm looking to add an automatic image effect when the page is loaded. I currently have this code in my js file: $(window).ready(function(){ $(pin).click(function(){ $("#pin01").show().animate({left: '650px'}); }) }); Here is the HTML wit ...

Title of Flickr API

Hey everyone, I'm working on setting up a gallery on my website using images and sets from Flickr. I've successfully loaded all the sets with the following code: $flickr = simplexml_load_file('http://api.flickr.com/services/rest/?method=fli ...

CSS - Adjusting width based on height ratio

I'm in the process of developing a website and could use some guidance. I have a specific section where I am aiming for the height to be 79.6% of the body, with the width of that div being dependent on its height. Thus far, my research has only yielde ...

What is the highest value that AutoCompleteExtender can reach?

I am currently using an AutoCompleteExtender in my code with the following configuration: <ajaxToolkit:AutoCompleteExtender runat="server" ID="autoCompleteOrigem" TargetControlID="txtClienteOrigem" ServicePath="~/Cliente/Au ...

Is there a way to send the image object to the onclick function as it is being assigned?

I apologize if my question is a bit unclear, as I am currently teaching myself how to use javascript. I am working on generating image thumbnails dynamically and would like the ability for users to enlarge the image when they click on the thumbnails. The p ...

Implementing beans within an HTML form action allows for seamless communication between the form and

I am seeking assistance as I am unable to locate any tutorials online for the issue I am facing. How do you go about using a <bean:write....> within a <html:form....> The code I have written is: <html:form action="/restricted/client/so ...

The CSS will dynamically adjust the width of the DIVs based on the browser size, allowing for more DIVs per

I am currently designing a layout to showcase content blocks side by side in a manner that fills the browser window with DIV blocks. I recall stumbling upon a CSS-only technique that automatically adjusts the width of each DIV based on the size of the bro ...

How can I include line breaks using HTML `<br>` tags in a textarea field that is filled with data from a MySQL

Within a modal, I am showcasing a log inside a read-only <textarea> field that contains data fetched from my MySQL database. Below this, there is a writable <textarea> field where users can input updates to the log, which are then added to the ...

Incorporate a fontawesome icon into a dynamically created button using ajax

Is it possible to insert fontawesome icons into a button created using this code snippet? $.each(response, function (i, item) { trHTML += '<tr><td>' + item.name + '</td><td>' + "<input type='button&apo ...

The React Vite application encountered an issue: There is no loader configured for ".html" files at ../server/node_modules/@mapbox/node-pre-gyp/lib/util/nw-pre-gyp/index.html

**Encountered errors in a React Vite web app** ** ✘ [ERROR] No loader is configured for ".html" files: ../server/node_modules/@mapbox/node-pre-gyp/lib/util/nw-pre-gyp/index.html ../server/node_modules/@mapbox/node-pre-gyp/lib/node-pre-gyp.js:86 ...

fade in and out twice (for beginners)

Jquery <script> //Code snippet $(document).ready(function(){ $(".team").click(function(){ $(".panel").fadeToggle("3000"); }); $(".team").click(function(){ $(".teamh").fadeToggle("3000"); }); }); </script> HTM ...

Using setTimeout to click and hold on an element in Javascript

I am in need of adding a feature to my web app where a specific action is triggered when the user clicks and holds on an element, similar to the long press on Android. Here is the HTML code for my div: <div id="myDiv" onmousedown="press()" onmouse ...