CSS Height/Width
In this page:
Setting height and width
The height and width properties set an element's size directly. Without them, most elements simply size themselves based on their content. Content that overflows a fixed height or width needs an explicit overflow property, or it will visibly spill outside the box.
Note: Only fix a width or height when you actually need a specific size, letting content determine size naturally is often simpler.
Warning: Forcing a fixed height on text-heavy elements can cause content to overflow if the text ends up longer than expected.
Example: Setting height and width
<style>
.box {
width: 200px;
height: 100px;
background: lightblue;
}
</style>
<div class="box">Fixed size box</div>min-height and max-height
min-height guarantees an element never shrinks below a certain size, even with little content, while max-height stops it from ever growing taller than a set limit. These properties are especially useful for preventing a card or container from collapsing to zero height when it temporarily has no content.
Note: min-height is great for cards in a grid, keeping short and long cards visually aligned to a comfortable baseline height.
Warning: Content longer than max-height will overflow visibly unless you also set overflow to hidden, scroll, or auto.
Example: min-height and max-height
<style>
.card {
min-height: 100px;
max-height: 200px;
background: lightyellow;
border: 2px solid #cc9900;
padding: 10px;
}
</style>
<div class="card">Never shorter than 100px, never taller than 200px</div>min-width and max-width
min-width stops an element from shrinking below a certain width, while max-width stops it from growing wider than a set limit, both very common tools for responsive layouts. Together with min-height and max-height, these four properties form the core toolkit for building flexible, responsive boxes.
Note: max-width paired with width: 100% is the classic pattern for a responsive image that never overflows its container.
Warning: A min-width that's wider than its parent container can force an element to overflow the layout on small screens.
Example: min-width and max-width
<style>
.box {
min-width: 150px;
max-width: 400px;
background: lightgreen;
border: 2px solid seagreen;
padding: 10px;
}
</style>
<div class="box">Between 150px and 400px wide</div>Percentage Units
A percentage height or width is calculated relative to the size of the element's parent container, which means the parent's own size directly affects how a percentage value renders.
Note: Percentage widths are extremely common for responsive columns that need to scale smoothly with their container.
Warning: Percentage height only works reliably if the parent element has an explicit height itself; otherwise it often has no visible effect.
Example: Percentage Units
<style>
.parent {
width: 400px;
background: #ddd;
padding: 10px;
}
.child {
width: 50%;
background: coral;
color: white;
padding: 10px;
}
</style>
<div class="parent">
<div class="child">50% of the 400px parent = 200px</div>
</div>Viewport Units: vh and vw
Viewport units are relative to the browser window itself, not to any parent element. 1vh equals 1% of the viewport's height, and 1vw equals 1% of the viewport's width. Because they scale with the viewport rather than a parent element, vh and vw are popular for full-screen hero sections and layouts.
Note: vh is a popular choice for making a hero section fill the full visible screen height when a page first loads.
Warning: On mobile browsers, the viewport height can shift slightly as address bars show or hide, so full-height vh sections sometimes jump a little.
Example: Viewport Units: vh and vw
<style>
.hero {
height: 100vh;
width: 100vw;
background: linear-gradient(135deg, #667eea, #764ba2);
color: white;
display: flex;
align-items: center;
justify-content: center;
}
</style>
<div class="hero">Fills the full browser viewport</div>- Setting a fixed height on an element with variable text content, which can cause the text to overflow.
- Using percentage height without realizing the parent element also needs a defined height for it to work.
- Forgetting that min-width and max-width can silently override a plain width value outside their range.
- height and width set an element's size directly, in units like px, %, vh, or vw.
- min-height/max-height and min-width/max-width set boundaries an element can't shrink below or grow past.
- Percentage sizes are relative to the parent element, while vh and vw are relative to the browser viewport.
All standard CSS sizing properties and units covered here are supported by every modern browser.
Chapter Quiz — Complete all 7 topics to unlock
0/7 topics done
Complete these topics first: