Как сделать тень шириной 100% под div

Я сделал фиксированный заголовок div на моем сайте и добавил тень под ним, но он не подходит моему браузеру (100% -ная ширина) ??Как сделать тень шириной 100% под div

вот мой CSS:

body{ 
 
margin: 0; 
 
padding: 0; 
 
background-color: #F7F7F7; 
 
} 
 

 
#head{ 
 
    width: 100%; 
 
    height: 60px; 
 
    background-color: #5B86E1; 
 
    
 
    box-shadow: 0 10px 17px -5px #000000; 
 
    position: fixed; 
 
} 
 

 
#content{ 
 
    width: 900px; 
 
    padding-top: 60px; 
 
    min-height: 100px; 
 
    background-color: #FFFFFF; 
 
    margin-right: auto; 
 
    margin-left: auto; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
</head> 
 
<body> 
 
\t <div id="head"> 
 
\t </div> 
 
\t 
 
\t <div id="content"> 
 
\t </div> 
 
</body> 
 
</html>

Вот снимок экрана:

источник

2015-11-04 fendert12

Самое водонепроницаемым решение: сделать ваш элемент больше (либо со свойством width или padding), чем область просмотра, и установите отрицательные поля (обратите внимание: поля действительно необходимы для выполнения этой работы с нефиксированными элементами). Ваш новый #head CSS:

#head { 
    width: 110%; 
    margin: 0px -5%; 
    height: 60px; 
    top: 0; 
    background-color: #5B86E1; 
    box-shadow: 0 10px 17px 0px #000000; 
    position: fixed; 
}

Как уже упоминалось другие ответы: рекомендуется установить распространение свойства границы радиуса до неотрицательного значения. Или вы можете использовать separate box-shadows for each side.

источник

2015-11-04 22:03:59 Tyblitz

Благодаря Tyblitz, Это очень интересное решение. Решение Бернхарда тоже хорошо ;-) – fendert12

Дайте фиксированный элемент позицию, используя lefttop `` right` ``

header{ 
    position:absolute; 
    left:0px; 
    top:0px; 
    right:0px; 
    height:60px; 

    background-color:#00f; 
    box-shadow:0px 0px 17px #000; 
}

Добавлена скрипка: https://jsfiddle.net/hpdymvqg/

источник

2015-11-04 22:00:20 Bernhard

У Вас есть отрицательный радиус распространения; для того, чтобы быть полной ширины вы хотите:

box-shadow: 0 10px 17px 0px #000000;

Демо:

body{ 
 
margin: 0; 
 
padding: 0; 
 
background-color: #F7F7F7; 
 
} 
 

 
#head{ 
 
    width: 100%; 
 
    height: 60px; 
 
    background-color: #5B86E1; 
 
    
 
    box-shadow: 0 10px 17px 0px #000000; 
 
    position: fixed; 
 
    
 
    margin-right: auto; 
 
    margin-left: auto; 
 
} 
 

 
#content{ 
 
    width: 900px; 
 
    padding-top: 60px; 
 
    min-height: 100px; 
 
    background-color: #FFFFFF; 
 
    margin-right: auto; 
 
    margin-left: auto; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
</head> 
 
<body> 
 
\t <div id="head"> 
 
\t </div> 
 
\t 
 
\t <div id="content"> 
 
\t </div> 
 
</body> 
 
</html>

источник

2015-11-04 22:01:15

Проблема заключается в том, что у вас есть отрицательное значение для вашего box-shadow. Изменение его следующие исправления вопроса:

box-shadow: 0 10px 17px 0px #000000;

Испытано here

источник

2015-11-04 22:04:28 Shadow

Как сделать тень шириной 100% под div

ответ

Смежные вопросы