我正在制作一个 960 像素的模板，但在挤压浏览器窗口时遇到了问题。每当我使窗口小于我的元素最小宽度时，右侧的框阴影就会消失。为什么会这样？
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;}
*/
最佳答案
这是因为 box-shadow 不是实际对象。这意味着 .container 的宽度不是用阴影宽度计算的。
在你的 body 上加一个小填充物。例如 padding: 5px; 阴影仍然可见。
body {background: url(images/bg-2.jpg) no-repeat ; background-size: cover; padding: 5px;}
或者添加一个媒体查询，使容器 100% 的视口(viewport)宽度减去阴影。
@media only screen and (max-width: 800px){
.container {
width: calc(100vw - 10px);
min-width: 0;
}
}
关于html - 挤压浏览器窗口时，Box-shadow 在右边被切掉，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32306349/