html - CSS 动态调整大小

问题描述

HTML：

<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title> Dummy Site | Home</title>
    <link rel="stylesheet" type="text/css" href="./css/style.css">
</head>
<body>
    <header>
        <div class="container">
            <div id="branding">
                <img src="https://i.imgur.com/MPoWmYb.png"></img>
                <h1>Title</h1>
                <h3>This is my description</h3>
            </div>

            <nav>
                <ul>
                    <li class="current"><a href="index.html">Home</a></li>
                    <li><a href="page1.html">Page 1</a></li>
                    <li><a href="page2.html">Page 2</a></li>
                    <li><a href="page3.html">Page 3</a></li>
                </ul>
            </nav>
    </header>  

    <section id="frontImage">
            <div class="frost">
                <h3></h3>
            </div>

    </section>

    <footer>
        <p>Name, 2018</p>
    </footer>
</div>
</body>
</html>

CSS：

body{
    font:15px/1.5 Arial, Helvetica, sans-serif;
    padding:0;
    margin:0;
    background-color:gray;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    width: 100%;
    height: 100%;
    text-align: center;
}

/* Global */
.container{
    width: 80%;
    margin:auto;
    overflow:hidden;
}

ul{
    margin:0;
    padding:0;
}

/* Header and logo */
header{
    top:0;
    color:#ffffff;
    background: inherit;
    box-shadow: inset 0 0 0 200px rgba(0,0,0,0.75);
}

header #branding{
    text-align: center;
}

header #branding h1{
    min-width: 200px;
    margin-left: 43.5%;
    margin-right: 43.5%;
    margin-bottom: 5px;
    border: solid 4px #ffffff;
}

header #branding h3{
    margin-top:0;
}

header nav{
    text-align: center;
    margin-bottom: 10px;

}
header li{
    padding: 0 30px 0 30px;
    display: inline;
}

header li a{
    font-family: Verdana;
    font: bold;
    text-decoration: none;
    color:#ffffff;
}

header li:hover{
    border: 2px solid #ffffff;
}

header #branding img{
    border: solid 2px #ffffff;
    top:1%;
    left: 3%;
    width:130px;
    height:130px;
    position: absolute;
}

.frost{
    top: 16.5%;
    left:0;
    text-align: center;
    color:#ffffff;
    width:40em;
    height:47.65em;
    position:absolute;
    background: inherit;
    overflow: hidden;
    margin: 0px auto;
    z-index: 1;
}

.frost:before{
      position: absolute;
      top: -20px;
      left: -70px;
      bottom: 0;
      z-index: 0;
      width: 200%;
      height: 200%;
      background-position: 50% 0;
      content: "";
      box-shadow: inset 0 0 0 3000px rgba(255,255,255,0.1);
      filter: blur(25px);
      z-index: -1;
      }

footer{
    position: absolute;
    bottom: 0;
    height:4.55em;
    width: 100%;
    color:#ffffff;
    text-align: center;
    background: inherit;
    box-shadow: inset 0 0 0 200px rgba(0,0,0,0.75);
}

Codepen 示例： https ://codepen.io/anon/pen/dQeeRG

大家好，

我目前正在构建一个网站，但是我似乎无法让它使用浏览器窗口（Chrome）动态调整大小。

我尝试过使用定位以及将容器设置为 80% 并在元素上设置边距等，但是诸如徽标之类的东西不会调整大小，“霜”元素也不会调整。

我暂时尝试在没有 Javascript 的情况下执行此操作，因为我正在学习这一点。

需要注意的是，.frost 的功能只是显示磨砂玻璃效果。

欢迎任何意见/建议。

标签： htmlcssgoogle-chrome

html - CSS 动态调整大小

问题描述

解决方案

推荐阅读