Html 如何使 div 缩放到浏览器宽度的 100%?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/16723522/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 08:43:10  来源:igfitidea点击:

How to make div scale to 100% of browser width?

csshtmltwitter-bootstrap

提问by Derek

<div id="sidebar">sidebar</div>
<div id="content">content</div>

The sidebar is a fixed width of 100px. How do I make the width of content to 100% of the browser width?

侧边栏的固定宽度为 100px。如何使内容的宽度为浏览器宽度的 100%?

http://jsfiddle.net/chickendance/qQQTU/1/

http://jsfiddle.net/chickendance/qQQTU/1/

回答by Kevin Boucher

You can do this with simple CSS:

你可以用简单的 CSS 来做到这一点:

#sidebar {
    float: left;
    width: 100px;
}

#content {
    margin-left: 100px;
}

Updated with wrapperdiv:

wrapperdiv更新:

HTML

HTML

<div id="wrapper">
    <p>wrapper</p>
    <div id="sidebar">sidebar</div>
    <div id="content">content</div>
    <p>wrapper</p>
</div>

CSS

CSS

* {
    /* reset */
    margin: 0;
    padding: 0;
}
html,
body {
    /* for demo purposes only */
    height: 100%;
}
#wrapper {
    /* for demo purposes only */
    background: rgba(200, 200, 200, 0.6);
    height: 100%;
}
#sidebar {
    float: left;
    width: 100px;

    /* for demo purposes only */
    background: rgba(200, 200, 200, 0.6);
    height: 50%;
}
#content {
    margin-left: 100px;

    /* for demo purposes only */
    background: rgba(200, 200, 200, 0.9);
    height: 50%;
}

Working example: http://jsfiddle.net/kboucher/FK2tL/

工作示例:http: //jsfiddle.net/kboucher/FK2tL/

回答by RandomUs1r

You have to play with the width % just like the rest of us:

你必须像我们其他人一样使用宽度 % :

 #content {
        background: green;
        float: left;
        width: 75%;
    }

I'd also consider adding a parent div of width: 100% as per the box model.

我还考虑添加一个宽度为 100% 的父 div,根据盒模型。

回答by Sam

Just change your #content properties to this:

只需将您的 #content 属性更改为:

#content {
            background: green;
            float: left;
            width: 100%;
            margin-right: -200px;
        }

So we are setting 100% width as you require, but offsetting the width of the other two DIVs. I learned this trick from CSS Zen Garden.

因此,我们根据您的需要设置 100% 宽度,但会抵消其他两个 DIV 的宽度。我从CSS Zen Garden学到了这个技巧。