How to set a width to turn on browser scroll bars and stop collapsing the elements on the page

问题

I'm creating a banner at the top of my page. It's built using 3 banners that will have content. When I horizontally shrink the browser window, my green banner component(on the right) moves with the edge of the screen eventually overlapping or going under my blue banner component (on the left).

How do I set a browser(body?) width at which the banner on the right stops moving with the shrinking browser and instead enable the browser scroll bars so the page stops shrinking?

If there's an entirely different/better way to approach this please throw all suggestions at me. Trying to learn as much as possible.

Your help is much appreciated. My code is as follows.

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">

    <style media="screen" type="text/css">

    .bannerBackground
        {
        width: 100%;
        position: absolute;
        top: 0;
        height: 27px;
        background-color: orange;
        }

    .rightBanner
        {
        position: absolute;
        top: 0px;
        right: 0px;
        z-index: 9;
        height: 27px;
        padding-right: 20px;
        width: 200px;
        text-align: right;
        color: #CCCCCC;
        font-size: 20px;
        font-family: "Trebuchet MS", Helvetica, sans-serif;
        font-weight: bold;
        background-color: green;
        margin:0;
        display: block;
        }

    .leftBanner
        {
        white-space: nowrap;
        position: absolute;
        top: 0px;
        left: 0px;
        z-index: 10;
        white-space: nowrap;
        margin-bottom: 0px;
        width: 645px;
        background-color: blue;
        height: 27px;
        display: block;
        }

    body
        {
        font-family: arial;
        margin: 0;
        padding: 0;
        color: #EEEEEE;
        }
</style>
</head>

<body>

        <div class="leftBanner">
        </div>

        <div class="rightBanner">
            <div>
            Some Title Text
            </div>
        </div>

        <div class="bannerBackground">
        </div>

</body>
</html>

回答1:

When you absolutely position elements you take them out of the flow of the page. You can instead use floats.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">

<style media="screen" type="text/css">

.bannerBackground
    {
    width: 100%;
    height: 27px;
    background-color: orange;
    }

.rightBanner
    {
    z-index: 9;
    height: 27px;
    padding-right: 20px;
    width: 200px;
    text-align: right;
    color: #CCCCCC;
    font-size: 20px;
    font-family: "Trebuchet MS", Helvetica, sans-serif;
    font-weight: bold;
    background-color: green;
    margin:0;
float: right;
    }

.leftBanner
    {
    white-space: nowrap;
    z-index: 10;
    white-space: nowrap;
    margin-bottom: 0px;
    width: 645px;
    background-color: blue;
    height: 27px;
float: left;
    }

body
    {
    font-family: arial;
    margin: 0;
    padding: 0;
    color: #EEEEEE;
min-width: 960px;
    }
</style>
</head>

<body>

    <div class="leftBanner">
    </div>

    <div class="rightBanner">
        <div>
        Some Title Text
        </div>
    </div>

    <div class="bannerBackground">
    </div>

</body>
</html>

回答2:

You need to remove the position:absolute . Then you could put it all in a container div and float the banners left and right with the body in the middle . That's how I'd do it.

来源：https://stackoverflow.com/questions/8142071/how-to-set-a-width-to-turn-on-browser-scroll-bars-and-stop-collapsing-the-elemen

标签

css

scrollbar