-
Ensure that you know what you are using % relative to
-
% is usually relative to the parent
-
Let's see some code!
<div class="image-wrapper"> <img src="image.png" alt="Example" id="sample-image"/> </div>.image-wrapper { width: 500px; } #sample-image { // This means that the image will be 50% of the parent, i.e., 50% * 500px = 250px width: 50%; }
-
Sometimes we want our elements to take up the full width/height of the document
-
We can do so with
vwandvh.image-wrapper { // This will ensure the container takes up the entire width of the screen width: 100vw; }
- Sometimes we want our elements to take up the space remaining after taking into account other elements
#content { height: calc(100vh - 70px - 70px); }
- We use
min-width/min-heightwhen we want to ensure that the element takes up at least a certain height - e.g. without min-width
- with min-width
- Look at the example code (HTML and CSS) below
