Change div height to fit content

: Category: Cascading Stylesheets; 19 December 2016; Hits: 4098

Applies to:

CSS
HTML

What?
A quick article on how to get a div layer to increase height based on how a heading fits on a page.

What?
I have a heading like this:

The code of this is:

copy raw

<div id="page-title" class="col-xs-12">
	<h1><a href="/">A long heading that wraps over several lines</a></h1>
</div>

<div id="page-title" class="col-xs-12">
<h1><a href="/">A long heading that wraps over several lines</a></h1>
</div>

When I shrink the browser, I get a heading like this:

The heading in narrow width (text overlap)

I want this to happen:

The code of this is the addedn overflow:hidden;height:1%;:

copy raw

<div id="page-title" class="col-xs-12" style="overflow:hidden;height:1%;">
	<h1><a href="/">A long heading that wraps over several lines</a></h1>
</div>

<div id="page-title" class="col-xs-12" style="overflow:hidden;height:1%;">
<h1><a href="/">A long heading that wraps over several lines</a></h1>
</div>

Source(s):

Stack Overflow - make div's height expand with its content

Category: Cascading Stylesheets :: Article: 646

Change div height to fit content

Add comment

Credit where Credit is Due:

Latest Articles

Accreditation

Joes Word Cloud