0

我正在制作一个 960px 的模板，但在挤压浏览器窗口时遇到了问题。每当我使窗口小于我的元素最小宽度时，右侧的框阴影就消失了。为什么会这样？

HTML：

<!DOCTYPE html>
<html>
    <head>
        <?$APPLICATION->ShowHead();?>
        <title><?$APPLICATION->ShowTitle();?></title>
        <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <div id="panel">
            <?$APPLICATION->ShowPanel();?>
        </div>
        <div class="container">
            <header>
                <div class="logotype">
                    <img src="<?=SITE_TEMPLATE_PATH?>/images/logotype.png">
                </div>
                <div class="login">
                    <a>Вход</a>
                </div>
                <div class="info">
                    <p>Уфа, Софьи Перовской 54</p>
                    <p>7 (347) 266-69-54</p>
                    <p>info@ufawell.ru</p>
                </div>
                <nav>
                    <ul>
                        <li>Home</li>
                        <li>Services</li>
                        <li>News</li>
                        <li>Contact</li>
                    </ul>
                </nav>
            </header>
<?
if(!defined('B_PROLOG_INCLUDED') || B_PROLOG_INCLUDED !== true)
    die();
?>
            <footer>
                <div class="copyright">
                    <p>© «ИП Тухватуллин Р.Р.», 2015.</p>
                </div>
            </footer>
        </div> <!--.container-->
    </body>
</html>

CSS：

#panel {min-width: 960px;}

body {background: url(images/bg-2.jpg) no-repeat ; background-size: cover;}

.container {
    width: 960px;
    min-height: 800px;
    position: relative;
    margin: 10px auto;
    background-color: #f3f3f3;
    box-shadow: 3px 3px 8px #9c9c9c;
    -moz-box-shadow:    3px 3px 8px #9c9c9c;
    -webkit-box-shadow: 3px 3px 8px #9c9c9c;
    box-shadow:         3px 3px 8px #9c9c9c;
}

/*
header {height: 100px; padding: 10px; width: 940px;}

.logotype {width: 200px;}
.logotype img {padding: 0 0 10px 0;}

.login {width: 200px;}

.info{width: 200px;}

nav {background-color: #961c00; width: 940px;}

nav ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    height: 30px;
}

nav ul li {
    display: inline-block;
    width: 80px;
}

footer .copyright {padding: 5px; width: 950px; background-color: #c1c1c1; bottom: 0px; position: absolute;} 
*/
4

1 回答 1

0

因为box-shadow它不是一个实际的对象。这意味着 的宽度.container不是用阴影宽度计算的。

在你的身体上添加一个小填充物。例如padding: 5px;，阴影仍然可见。

body {background: url(images/bg-2.jpg) no-repeat ; background-size: cover; padding: 5px;}

或者添加一个媒体查询，使容器 100% 的视口宽度减去阴影。

@media only screen and (max-width: 800px){

    .container {
       width: calc(100vw - 10px);
       min-width: 0;
    }

}
于 2015-08-31T08:19:08.557 回答