Question

作为学校的家庭作业，我创建了一个网站，但却是一个div .container { padding: 0px; margin: 0px; border: 0px; position: absolute; top: 70vw; width: 100vw; }已经离开了窗户，因此h1
.titolo { font-family: musei; color: #555555; font-size: 4vw; text-align: center; display: block; margin: 0 auto; }被置于其中使得h1和a 形成
.map { display: block; margin: 0 auto; }如果没有以所有决议为中心，也要置于div之内。

为什么即使我写了100vw，div也不大，而不是占用窗口的激励宽度？

这里是完整的HTML / CSS代码

＆＃13;

.immag {
    max-width: 100%;
    height: auto;
    position: absolute;
    top: 0px;
    left: 0px;
}
.map {
    display: block;
    margin: 0 auto;
}
.titolo {
    font-family: musei;
    color: #555555;
    font-size: 4vw;
    text-align: center;
    display: block;
    margin: 0 auto;
}

.container {
    padding: 0px;
    margin: 0px;
    border: 0px;
    position: absolute;
    top: 70vw;
    width: 100vw;
}

.border {
    background-color: #ebebeb;
    margin: 0 auto;
    width: 300px;
    border-style: ridge;
    border-color: #00c4ff;
    border-width: 1vw; 
    width: 20vw;
    height: auto;
}

@font-face {
    font-family: musei;
    src: url(font-titolo-musei.otf);
}
html {
    overflow-y: scroll;
}
.over {
    overflow-y: hidden;
    width: 200vw;
}

＆＃13;

<html>
    <head>
        <link rel="stylesheet" href="style.css" type="text/css">
        <link rel="shortcut icon" href="favicon.ico" >
        <title>1CE</title>
    </head>
    <body>
        <img src="Senza%20titolo-1.jpg" class="immag">
        <div class="container">
            <div class="border">
        <h1 class="titolo">MUSEI</h1>
            </div><br>
        <iframe class="map" src="https://mapsengine.google.com/map/embed?mid=zi8GElmpTlNo.kJ3GnRl1X08c" width="640" height="480"></iframe>
        </div>
    </body>
</html>

＆＃13;

Answer 1

使用100vw将始终使站点占用整个视口，但滚动条也是视口的一部分，并且会使显示的内容小于实际视口。使用宽度：100％将解决滚动条妨碍您的问题。

CSS Div退出视口并破坏了响应式设计

1 个答案: