issues arise with the child's height reaching 100%

I am experiencing some height issues with the div.wrapper .content ul.feeder element in my code. Can anyone help me figure out what's going on?

Here is a snippet of the code I am working with:

html, body {height:100%;background:#F7F7F7;}
* {
    margin:0;
    padding:0;
    font-size:12px;
    font-family: 'Roboto', sans-serif;
    font-weight:400;
    color:#333;
}
* .left {float:left;}
* .right {float:right;}
* .center  {margin:auto auto;}
* a {
    text-decoration:none;
    color:inherit;
    font-size:inherit;
    font-weight:inherit;
}

div.wrapper .content {
    width:calc(100% - 202px);
    min-height:calc(100% - 85px);
    margin:10px;
    background:#FFF;
    border:1px solid #DCDCDC;
}
div.wrapper .content ul.feeder {
    display:block;
    width:500px;
    height:100%;
    overflow:auto;
    border-right:1px solid rgba(53,53,53,0.2);
    list-style-type:none;   
}
div.wrapper .content ul.feeder li.title {
    font-size:32px;
    font-weight:300;
    padding:10px;
    border-bottom:1px solid rgba(53,53,53,0.2);
}
div.wrapper .content ul.feeder li.item {
    padding:10px;
}
div.wrapper .content ul.feeder li.item:hover {
    background:#F7F7F7;
}

Despite setting the height to 100%, the div.wrapper .content ul.feeder element does not seem to be taking up the full height. Any insights into why this might be happening?

edit: jsfiddle

edit: working example with jsbin

htmlcss

Answer №2

My solution involved setting min-height:calc(100% - 85px); to height:calc(100% - 85px); for the div.wrapper .content element:

div.wrapper .content {
    width:calc(100% - 202px);
    height:calc(100% - 85px);
    margin:10px;
    background:#FFF;
    border:1px solid #DCDCDC;
}
    div.wrapper .content ul.feeder {
        width:500px;
        height:100%;
        overflow:auto;
        border-right:1px solid rgba(53,53,53,0.2);
        list-style-type:none;   
    }
    div.wrapper .content ul.feeder li.title {
        font-size:32px;
        font-weight:300;
        padding:10px;
        border-bottom:1px solid rgba(53,53,53,0.2);
    }
    div.wrapper .content ul.feeder li.item a {
        padding:10px;
    }
    div.wrapper .content ul.feeder li.item:hover {background:#F7F7F7;}

Answer №3

Utilizing min-height will be beneficial for your situation.

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

A Guide to Modifying Background Image Attribute using JavaScript

I am currently in the process of changing an attribute of a JavaScript variable from url("../images/video.png") (as declared in the CSS) to url("../images/pause.png") using this line of code: fullscreenPlayPauseButton.style.backgroundImage = "url("../imag ...

javascriptcssimage

The art of perfect alignment: Mastering the positioning of Material-UI Grid

This issue has been resolved Hey there, I'm currently working on a React App with Material-UI and I'm trying to center a Grid item that includes a Card along with two additional Grid items. Below is the relevant code snippet. Although the Cards ...

javascriptcssreactjsmaterial-uimaterial-design

Can you place 4 table cells in the first row and 3 table cells in the second row?

Exploring the world of HTML and CSS designs for the first time. Here's a code snippet I've been working on: <html> <body> <table width="100%"> <tr> <td width="25%">&#160;</td> ...

html

Triggering a click event within a Bootstrap popover

Clicking the inbox button triggers the inbox_open() function. When this function runs, three buttons appear in the inbox header but there is no onclick event listener attached to them. Make sure to review the code after the // inbox.open comment for critic ...

javascriptjquerycsshtmlbootstrap-4

Utilize JavaScript to enclose every piece of text within single quotes in a span element

I have a tiny snippet of text: "some sample text" just a little more "additional text" I am trying to figure out how to wrap all the content between quotation marks in a span container, similar to what hilight.js does. I've been struggling to make it ...

javascripthtml

Pandoc has removed all the line breaks in this text

I am currently utilizing pandoc for converting HTML to Markdown format. However, I have noticed that Pandoc tends to remove line breaks in the final output. Below is the command I am executing: pandoc -f html -t markdown_phpextra myfile.html Does anyo ...

htmlmarkdownline-breakspandoc

HTML text has been partly processed

When Xml is parsed using a SAX Parser, there is one specific tag called <Panchanga> which contains HTML contents. The structure of the tag is as follows: <Panchanga><table style='font-size:14px;'> <tr> <td ><img ...

androidhtml

I am experiencing issues with the interpolation of my SASS variables when they are placed into

I am relatively new to the Nuxt ecosystem and I must say it's an awesome package that really simplifies our lives. Currently, I am attempting to incorporate sass into my project. Despite following the steps outlined in the documentation, my build is ...

cssvue.jssassnuxt.js

Building an Ionic Angular application that converts milliseconds to DateTime values retrieved from local storage

I have a mobile app built using Ionic framework where I retrieve data from local storage. My goal is to convert the milliseconds into a readable date format. I have tried the code below but it's not giving me the desired output. Can you please point ...

javascripthtmlangularjsionic-framework

Is it possible to send a form without using a submit button or pressing the enter key?

Is it possible to submit the value of a <select> in a PHP form without using a submit button? In my HTML/PHP code, I have two forms with two <select> elements. The second <select> (sub category) should use the value selected in the firs ...

phphtml

Font reference in IE and Chrome causing HTTPS to fail

Take a look at in both Internet Explorer and Chrome. The header tags (h1 through h6) all have font specifications that rely on a javascript fonts.com specification. However, there seems to be an issue with rendering properly. Interestingly, the fonts ar ...

csshttpstypekit

Footer positioned centrally on screen

My webpage footer seems to be misplaced, appearing in the middle of my content instead of at the bottom where it should be. Surprisingly, the code for the footer works perfectly on other pages. Any suggestions on why this might be happening? I've sco ...

htmlcss

When resetting the function, make sure to move the class to the closest sibling element

I am currently utilizing a slider that employs the .prev and .next jQuery functions to toggle the active class, indicating which slide is being displayed. Here is the code responsible for this functionality. It identifies the current sibling with the acti ...

javascriptjquerycss

Is there a way to use AngularJS foreach to extract targeted values by a specified key from a JSON object?

I have received a JSON object from an elastic search query as shown below: How can I extract the Agent and calls values from this JSON data? $scope.results = client .query(oQuery.query($scope.queryTerm || '*')) . ...

javascripthtmljsonangularjs

Transform the image background on mouse hover using CSS

On my php page, I am dynamically visualizing thumbnails. To ensure that they are all the same size, I use the following method: <a class="zoom" href="..."> <img src="thumb/default.png" width="130" style="background-image:url(thumb/<?php echo $ ...

css

Ensuring H1 Header and Regular Text Are Aligned on the Same Line

Is there a way to place a H1 header and regular text side by side on a single line with a line underneath them? Here is what I have attempted so far: This code snippet was my attempt, however, it did not produce the desired result. Can you point out what ...

htmlcss

Unlocking the API endpoints within nested arrays in a React project

{ [ "quicktype_id": 1, "quicktype": "Laptops", "qucik_details": [ { "type_name": "car", "type_img": "car_img" }, { "type_name": "van", "type_img": ...

javascripthtmlreactjsarraysapi

When clicking on links that are not within the ng-view element, you will be redirected to the

I'm having trouble coming up with a name for this question, but here's my current situation This is the structure of my template: ├── index.html ├── ... ├── account │ ├── index.html │ ├── authorizat ...

javascripthtmlangularjs

Issue with menu display after clicking icon

On my website, I am trying to set up an icon that will display a menu bar for mobile users. I have written some JavaScript code for this functionality, but it's not working as expected. My approach involved creating an element called "Menu" and assign ...

javascripthtmlcss

Assistance required: Click on the button to select and copy all text within the specified paragraph ID

Hey there! I've got a div with a dropdown menu that reveals text and images based on the selected option. What I want to achieve is having a button that allows users to copy all the content inside the div. Below is my sample code for the div dropdown ...

javascriptjqueryhtmlcss