We can control the width and height of an element using the width and height declarations for the purpose
of this lesson will apply various width and height attributes to a div to see the effect to start open
the H2 AML file in your Downloads folder corresponding to this lesson.
The file contains a div in the body and one I.D. selector Div 1 which has been applied to the div.
Let's preview this file in our web browser to see what it looks like.
Here we can see the div is 100 percent width of the content area and 500 pixels in height with a blue
background.
If we scale the browser window up and down
we can see that the div expands and contracts to suit the size of the content area.
It is always 100 percent of the content areas with
CSX allows different values to be attributed to the width and height declaration will begin with minimum
width meanwhile with can be used to specify the minimum amount of with an element must be since the
width is currently set to 100 percent of the content area it will automatically stretch and contract
with the browser window as we saw previously.
If we wanted to maintain a minimum fixed width of at least six hundred pixels we can apply the following
declaration
now after you've saved your file.
Let's go ahead and refresh our browser
and this time you'll see that when the browser window
becomes smaller than six hundred pixels we get the horizontal scroll bars.
This is because this div it's minimum with must be six hundred pixels it will not go below that value
in addition to menu.
We also have maximum width or max width so if we set the maximum with to eight hundred pixels
I'll save the file and we refresh the browser
you'll notice that the div now does not go beyond 800 pixels
so we have a minimum width said it's six hundred and a maximum of eight hundred
which can also be set to auto so let's go ahead and set the width declaration value to auto and this
will make the width of the Element automatically size to its container.
In this case the div is not nested in another div so it will expand to the full size of the browser's
content area.
Now we do have to remove the max with declaration in order for the auto declaration to work
so once you've saved refresh your browser and you'll notice that it now scales to the full width of
the content area automatically
similar to min with Max with.
We also have min height and max height these values can be stated in pixels or percentage just like
the can with min with and Max with
an important difference between the width in height declarations is that setting the height to 100 percent
will not result in your div occupying 100 percent of your browser's content area so for example if we
were to change the height here to 100 percent
and refresh our content area so you refresh our browser you'll notice that the div disappears altogether
in order to do this we need to use the V H unit that's available with recent versions of CSX VH which
stands for viewport height ensures that the element stretches to the full height one hundred percent
of any device's viewport
so let's go ahead and change the height value to 100 VH save the file and when we refresh you can see
that it is now 100 percent of the height and 100 percent of the width.