Question

我想在网页顶部创建一个标题栏，为其添加背景颜色，然后在其上添加徽标。

所以问题是：

栏的宽度应为页面的宽度。 它的高度应该是徽标的大小（加上一些填充物徽标图片）。

或者有没有办法让酒吧像它一样大内容加上添加到内容中的填充？

我实际搜索了SO和found this，我试图将其重现为我的代码，但它似乎对我没有帮助。

我还看过this和this。

我的代码如下：

<!DOCTYPE html>

<html>

    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            .div {
                position: absolute;
                height: auto; //**** When changed to a percent value, it displays
                width: 100%;
                top: 0px;
                left: 0px;
                float: left;
                background: #000029;
            }
            .logo {
                position: fixed;
                top: 5px;
                left: 12px;
                bottom: 4px;
            }
        </style>
    </head>

    <body>
        <div class="div">

             <img src="http://********Header.svg" alt="Logo" class="logo" >

        </div>
    </body>

</html>

它根本不显示背景颜色，当我将高度值更改为某个百分比值时，它会显示。

所以我想要的是酒吧的高度应符合其内容，即徽标图片。

编辑： -

enter image description here

Answer 1

删除几乎所有CSS规则，并使用基本内容：

.div {
    background: #000029;
}
.logo {
    vertical-align:top;
}

<强> jsFiddle example

Answer 2

改变你的css代码，如下所示：

.div {
      position: fixed;  
      width: 100%;
      top: 0px;
      left: 0px;
      background: #000029;
      padding:5px;
      }

       .logo {               
        }

在此处查看演示----＆gt; http://jsfiddle.net/4A7Q9/1/

Answer 3

风格可以是以下几点：

<style>
            .div {

                width: 100%;
                background: #000029;
                padding-left:10px;
                padding-right:10px;
                padding-top:10px;
                padding-bottom:10px;
            }
            .logo {

            }
        </style>

如何使div的高度适合其内容？其他答案没有解决它

3 个答案: