CSS 百分比行为答案

【问题标题】：CSS percentage behaviorCSS 百分比行为
【发布时间】：2014-09-06 05:47:38
【问题描述】：

我对百分比有一些奇怪的行为。
我的布局是 1366 像素宽，我有一个 div 应该是流畅的。
它的宽度为 200 像素，这意味着它的宽度应为 14.64%。
当布局以 1366 像素测试时，div 看起来很好，没有问题，但是当我扩展到 1920 时，div 不够宽。
以下是一些代码示例： HTML：

<header>
    <div class="top-bar">
        <div class="fill"></div>
        <div class="container">
            <nav>
            </nav>
        </div>
    </div>
    <div class="bottom-bar">
    </div>
</header>

和 CSS

.container{
    width: 1004px;
    margin: 0px auto 0px auto;
}

header{
    width: 100%;
    height: 95px;
}

header div.top-bar{
    background: #ffffff;
    width: 100%;
    height: 50px;
}

header div.fill{
    background: #000000;
    width: 14.64%;
    height: 50px;
    float: left;
}

nav{
    height: 50px;
    float: left;
}

header.main div.bottom-bar{
    background: url("header-bottom.png") repeat-x;
    width: 100%;
    height: 45px;
}

我以前编写过液体设计，但从来没有遇到过这样的问题，也许我的数学是错误的，或者问题是其他所有内容都是以像素为单位硬编码的，这是液体？

【问题讨论】：

如果我错了，请纠正我您是否使用填充来设置容器然后添加标题 div.fill{ 背景：#000000;最小宽度：14.64%；宽度：14.64%；高度：50px；向左飘浮; }
容器有边距：0px auto;它在页面中间对齐。填充 div 的想法是在容器之前填充左侧部分 - 从左侧页面边框到容器（导航）。
jsfiddle.net/0ow7hm9w 在这里看到改变屏幕大小填充大小也改变
你说你想要的东西是 1366px 宽...我在你的 css 中的任何地方都看不到 1366。您是否期望 1366 和 1920 的 14.64% 相同？如果某些东西需要200px 宽，为什么不能指定200px 而不是14.64%？对我来说，你的问题完全不清楚。
我建议您对所有元素使用百分比值，而不是使用像素。对于容器类也是如此。

标签： html css liquid

【解决方案1】：

我猜这个问题是因为容器有一个像素大小，而填充是百分比。如果您想要通过填充实现的只是在容器周围放置背景颜色，您可以执行以下操作（并删除填充类 css）

.container{
    width: 1004px;
    margin: 0px auto 0px auto;
    background: #ffffff;
}

header div.top-bar{

    width: 100%;
    height: 50px;
    background: #000000;
}

现在，如果您只想为左侧着色，并且想要很好地适合您的“填充”div，那么容器和填充都可以以百分比或像素为单位（在不同的屏幕尺寸下无法正常工作）。有不同的解决方法可以使您的填充工作，例如以下

header div.fill {
background: #000000;
width: 50%; /*make it wide enough*/
height: 50px;
float: left;
z-index: -1; /*put it behind container*/
position: relative;
}

header div.top-bar{
    background: #ffffff;
    width: 100%;
    height: 50px;
    z-index: -2; /*put it behind all*/
    position: relative;
}

【讨论】：

我一开始就想到了这个，但它确实是一个选择，因为这个想法是只在容器的左侧有黑色（#000000），在右侧它应该是背景颜色。
我用 background-gradient 完成了它，它有 50% 黑色，另外 50% 是白色，所以没有问题，但我认为这不是正确的方法，必须有其他解决方案。
已使用一种可能（不是最佳）解决方法编辑了答案。但是，像素和百分比永远不能很好地结合在一起。如果这不是一个非常小的项目，我强烈建议您看看 Bootstrap 3。
谢谢！ :) 我听到了很多关于引导程序的信息，但从来没有得到过给他机会的机会。恐怕它有很多我永远不会使用的功能（按钮、下拉菜单等）。 ://
它有很多功能，你可能不需要全部。但是，如果您的项目大幅增长，您最终会使用其中的大部分。一旦你习惯了它，你就不想再从头开始编写你的 CSS 了。工作量很大，而且长时间维护（以及针对不同屏幕）本身就是一场噩梦！

【解决方案2】：

对于管理布局，例如使用网格系统 css 系统

引导

http://getbootstrap.com/

或

960网格系统

http://960.gs/

【讨论】：