Ways to maximize the use of vertical space within an element

Question

Ways to maximize the use of vertical space within an element

Check out this code snippet on JSFiddle by clicking here. This excerpt of code showcases a table with a unique layout:

<table style="height:100%">
    <tr height="20"><td></td></tr>
    <tr>
        <td>This gray cell fits all available height of table</td>
    </tr>
    <tr height="20"><td></td></tr>
</table>

The table consists of three rows, with the middle row adjusting its height to fit that of the entire table. The solution for this design was inspired from this source.

The challenge arises when trying to add overflow-y scrolling to the middle cell. It appears that the minimum height of the content inside the cell affects this feature. Is there a way to enable vertical scrolling (overflow-y:auto) or if not, how can a similar layout be achieved using div elements?

UPDATE: A working example is available at http://jsfiddle.net/haGWe/6/. However, it's still intriguing to explore alternative implementations using divs.

html css

Answer 1

Answer №1

Check it out right here.

To implement this solution, simply include a div within your td element with a specified height (I used 20px) and apply overflow: auto.

Answer 2

Check it out right here.

To implement this solution, simply include a div within your td element with a specified height (I used 20px) and apply overflow: auto.

Answer 3

Answer №2

Enclose the middle row's contents in a div element and apply CSS to that div.

<div class="widget">
<table cellpadding="0" cellspacing="0">
    <tr class="widget-header">
        <td>20 px above</td>
    </tr>
    <tr class="widget-content">
        <td><div id="myDiv">This gray cell takes up all available height of the table. What happens when more text is added here? Scroll bars appear.</div></td>
    </tr>
    <tr class="widget-footer">
        <td>20 px below</td>
    </tr>
</table>
</div>

.widget{
    position:absolute;
    min-width:200px;
    width:200px;
    outline:1px solid gray;
    right:50%;
    top:20px;
}
.widget > table{
    height:100%;
    width:100%;
}
.widget-header{
    height:20px;
}
.widget-content{
    vertical-align:top;
    background:gray;
}
.widget-footer{
    height:20px;
}
#myDiv
{
    height:40px;
    overflow-y:scroll;
}

http://jsfiddle.net/2YvG6/

Answer 4

Enclose the middle row's contents in a div element and apply CSS to that div.

<div class="widget">
<table cellpadding="0" cellspacing="0">
    <tr class="widget-header">
        <td>20 px above</td>
    </tr>
    <tr class="widget-content">
        <td><div id="myDiv">This gray cell takes up all available height of the table. What happens when more text is added here? Scroll bars appear.</div></td>
    </tr>
    <tr class="widget-footer">
        <td>20 px below</td>
    </tr>
</table>
</div>

.widget{
    position:absolute;
    min-width:200px;
    width:200px;
    outline:1px solid gray;
    right:50%;
    top:20px;
}
.widget > table{
    height:100%;
    width:100%;
}
.widget-header{
    height:20px;
}
.widget-content{
    vertical-align:top;
    background:gray;
}
.widget-footer{
    height:20px;
}
#myDiv
{
    height:40px;
    overflow-y:scroll;
}

http://jsfiddle.net/2YvG6/

Ways to maximize the use of vertical space within an element

Answer №1

Answer №2

Similar questions

invalid audio element

Stop the replication of HTML/CSS styles during the extraction of content from a div

An error has occurred in the Shadow Dom due to the inability to access the property 'style' of an

Executing an AngularJS function within a form element using the ng-submit directive

Managing primary and secondary color schemes within Material Design Components for Web - a complete guide

Guide on triggering an open modal when clicking a link using jQuery

I am encountering some problems with the Drop Down navigation feature on my Bootstrap website. Does anyone know how to properly center the drop down menu?

Split the content of a textarea before it reaches the next element

Having difficulties with DIV elements

Is there a way to maintain the original style of an HTML element when printing it?

When HTML elements are unable to access functions defined in separate JS files

Adaptable background image - smoothly resize/reposition

Clicking on the icon image that features a Background Video will trigger the video to play in a popup window originating from the same location

The functionality of Bootstrap popover is not functioning properly

Challenges of relative positioning with dynamic height based on content

Problems encountered with the navigation on mobile devices

Grid item overlay

Is there a way to display the true colors of a picture thumbnail when we click on it?

If I choose a different option from the dropdown list, I would like a textbox to appear

Challenges with moving images in Unslider