How to Make a Link Inside a Div Fill the Entire Space Inside the Div

Divs inside of Div Fill Entire Parent DIV Without Display:Table

From MDN:

The flex CSS property is a shorthand property specifying the ability
of a flex item to alter its dimensions to fill available space.

You need to provide flex: 1; to .container > div > div to expand the inner div elements.

.container > div > div {
    border: 5px solid green;
    height: 50px
}

Demo

Have a link fill div vertically

Apply height:0px to the parent elemetns #calla and #calsd so that the height:100% on anchors will work.

Demo

(Parent element needs explicit height set for % height. refer this old SO question)

Update:

You can also apply display:inline-block; to the anchors as Jack Pattishall Jr pointed out in the comments

Demo

How to make content fill space inside div tag in html?

I know you said:

I'm trying to avoid tables.

But, they make this really easy, so here's a display: table based answer:

Live Demo

I can't think of a more eloquent way to do this without resorting to JavaScript.

CSS:

.notificationArea
{
    width: 280px;
    vertical-align: middle;
    text-align:left;
    background: #ccc;
    display: table
}
.notificationArea a, .notificationArea input {
    display: table-cell
}
.notificationArea input {
    width: 100%
}

HTML:

<div class="notificationArea">
    <a href="#">A</a> <a href="#">B</a>
    <input id="Text1" type="text" />
</div>

Inside div 100% height of link

Since the class name is overlay I believe you want it to overlap the img?

If so use position: absolute;. Your div is set to height: 100%; but its width is 0 so change it to 100% as well.

Demo

---

Related Topics