當擠壓瀏覽器窗口時，右側會切出箱形陰影

我正在製作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>[email protected]</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;} 
*/

來源

2015-08-31 Dor Soti

Dor，歡迎來到StackOverflow。請添加一個工作小提琴（http://jsbin.com/或http://jsfiddle.net/），以便我們可以幫助您。 –

其因box-shadow不是一個實際的對象。這意味着.container的寬度不是用陰影寬度計算的。

給你的身體添加一個小填充物。 E.g 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-31 08:19:08 Jacob

感謝您的幫助。 –

歡迎你！不要忘記將答案標記爲解決方案 – Jacob

當擠壓瀏覽器窗口時，右側會切出箱形陰影

回答

相關問題