是什么决定了这个<section>元素的高度？

Question

我使用的是我遇到的一个基本模板。我在内部使用它来显示信息，我正在寻找具有这样的布局的东西。

我想要实现的是让#banner元素变得更短。大约300px或任何同等大小。只是现在不是700px左右。

Template I am using

以下是来自style.css的#banner部分

/* Banner */
#banner {
    background-color: #6a86b0;
    background-image: url("../images/mainHelperBanner.jpg");
    background-size: auto;
    background-position: center center;
    background-repeat: no-repeat;
    color: #d8d8d8;
    padding: 14em 0;
    text-align: center;
    position: relative;
}
    #banner:before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 50%;
        background: rgba(64, 72, 80, 0.25);
    }
    #banner .inner {
        position: relative;
        z-index: 1;
    }
        #banner .inner :last-child {
            margin-bottom: 0;
        }
    #banner h2, #banner h3, #banner h4, #banner h5, #banner h6 {
        color: #ffffff;
    }
    #banner .button.alt {
        box-shadow: inset 0 0 0 1px rgba(144, 144, 144, 0.75);
        color: #ffffff !important;
    }
        #banner .button.alt:hover {
            background-color: rgba(144, 144, 144, 0.275);
        }
        #banner .button.alt:active {
            background-color: rgba(144, 144, 144, 0.4);
        }
        #banner .button.alt.icon:before {
            color: #c1c1c1;
        }
    #banner .button {
        min-width: 12em;
    }
    #banner h2 {
        font-size: 3.5em;
        line-height: 1em;
        margin: 0 0 0.5em 0;
        padding: 0;
    }
    #banner p {
        font-size: 1.5em;
        margin-bottom: 2em;
    }
        #banner p a {
            color: #ffffff;
            text-decoration: none;
        }

这是我的索引中的html。

<!-- Banner -->
<section id="banner">
    <div class="inner">
        <h2>Integrator</h2>
        <p>Teams/sharepoint/tigerpaw/appenate</a></p>
        <ul class="actions">
            <li><a href="#content" class="button big special">xx</a></li>
            <li><a href="#elements" class="button big alt">xx</a></li>
        </ul>
    </div>
</section>

我尝试过的：

在用我自己的一个大小合适的图片替换了库存图片后，我更改了

 background-size: cover;

至

 background-size: auto;

没有明显的结果。有人认为这与填充有关。所以我改变了

 padding: 14em 0;

到了无数不同的值，什么都没有改变。我还更改了(横幅:之前)

    height: 50%;

设置为几个不同的值，并且没有变化。

我的css水平是中等的，我会说，我知道的足够多，通常我想做什么，但在这种情况下，我被难住了。我没有看到任何其他应该影响高度的设置。

编辑:它是填充的，但它被以下内容覆盖：

<noscript>
    <link rel="stylesheet" href="css/skel.css" />
    <link rel="stylesheet" href="css/style.css" />
    <link rel="stylesheet" href="css/style-xlarge.css" />
</noscript>

一旦我删除了指向style-xlarge.css的链接，它就开始监听填充设置。

我不明白的是这个。当我第一次安装这个模板时，flask并不乐意找到这些链接。它找到了所有的链接，但没有找到这些，直到noscript标签被删除。

如果这是完整的头部

<head>
    <meta charset="UTF-8">
    <title>Transit by TEMPLATED</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <!--[if lte IE 8]><script src="js/html5shiv.js"></script><![endif]-->
    <script src="js/jquery.min.js"></script>
    <script src="js/skel.min.js"></script>
    <script src="js/skel-layers.min.js"></script>
    <script src="js/init.js"></script>
    <noscript>
        <link rel="stylesheet" href="css/skel.css" />
    <link rel="stylesheet" href="css/style.css" />
    <link rel="stylesheet" href="css/style-xlarge.css" />
</noscript>

​

在这种情况下，noscript标记的意义是什么？我的理解是，它规定了浏览器何时禁用脚本？

Answer 1

您可以将padding更改为如下所示，以缩短#banner部分的高度：

padding: 6em 0em;