CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Cody J. Mathis
Cody J. Mathis

Reputation: 652

Fit all Bootstrap content in viewable area

I'm attempting to create an application that displays camera images on a page. I've got one page that will have two rows of 3 cameras using the 4 x 4 x 4 layout and that works fine since most screens will fit both rows of cameras. However when I add another row or two I run into an issue where I can't fit all the content on the same page, it always requires scrolling down on a smaller monitor to see the content. Obviously by default my content does shrink when I make my window size smaller but I'm looking for a way to do this automatically whenever my page is loaded.

I've tried doing a <div class="container" style="height: 75%; max-height: 80%">however that doesn't seem to affect the height at all.

In terms of layout, here is my first row of cameras:

<div class="container" style="height: 75%; max-height: 80%">
    <div class="row">

            <div class="row">
                <div class="col-md-4">
                    <asp:Image ID="Image1" runat="server" Height="100%" Width="100%" />
                </div>
                <div class="col-md-4">
                    <asp:Image ID="Image2" runat="server" Height="100%" Width="100%" />
                </div>
                <div class="col-md-4">
                    <asp:Image ID="Image3" runat="server" Height="100%" Width="100%" />
                </div>
            </div>

I've tried setting a <div class="container" style="height: 500px;">to see if it would manually set the height - which didn't work. I'm using Bootstrap 3.3.6

Upvotes: 0

Views: 6708

Answers (1)

hungerstar
hungerstar

Reputation: 21685

Percentage heights require a height to be set on the parent element, otherwise it will not do what you think it should do.

Because of the above reason, setting a height on .container won't work for your images that have height and width set to 100%.

You have three elements between the element you specified a height on and the ones using height: 100%;. You need to either:

  1. Set a height on .col-md-4 or
  2. Have each element between .container and your image have height: 100%; set on them. That way the height set on .container will "reach" the image.

What you have now

<div class="container" style="height: 75%; max-height: 80%">
    <div class="row"><!-- No height set -->
        <div class="row"><!-- No height set -->
            <div class="col-md-4"><!-- No height set -->
                <!-- Percentage height doesn't work here as parent doesn't have a height explicitly set. -->
                <asp:Image ID="Image1" runat="server" Height="100%" Width="100%" />
        </div>
    </div>
</div>

Option 1

.col-camera {
    height: 150px;
}

<div class="container" style="height: 75%; max-height: 80%">
    <div class="row"><!-- No height set -->
        <div class="row"><!-- No height set -->
            <div class="col-camera col-md-4"><!-- Height set (via CSS, 150px) -->
                <!-- Percentage height will work here as parent does have a height explicitly set. -->
                <asp:Image ID="Image1" runat="server" Height="100%" Width="100%" />
        </div>
    </div>
</div>

Option 2

This option assumes that .container is able to take up 75% of it's parent as the parent has a height set on it.

.container {
    height: 75%;
    max-height: 85%;
}
.container .row,
.container .col-md-4 {
    height: 100%;
}

<div class="container">
    <div class="row"><!-- Height set (via CSS, 100%) -->
        <div class="row"><!-- Height set (via CSS, 100%) -->
            <div class="col-md-4"><!-- Height set (via CSS, 100%) -->
                <!-- Percentage height will work here as parent does have a height explicitly set. -->
                <asp:Image ID="Image1" runat="server" Height="100%" Width="100%" />
        </div>
    </div>
</div>

I'm sure there's other solutions but remember, if you're working with percentage heights you have to set a height on the parent element. If that parent element's height is also a percentage, then it will need a height set on it's parent and so on and so forth.

You might look into using viewport units if they match your support levels.

Upvotes: 3

Related Questions