Bymas | вопрос по каскаду

Топ дня:

RGame

Тема закрыта by

pyrokinesis
Причина: решил

не могу понять почему футер и верхнее меню при уменьшении окна браузера cжимаются хоть и стоит размер width:100%;

html

   <div class="content-wrapper">       <heider>тут меню </heider>                        <div class="container clearfix">             <main class="content">             тут основной контейнер   </main>     </div>            <footer class="footer">            Footer         </footer>           </div>

css

   * {     -webkit-box-sizing: border-box;     -moz-box-sizing: border-box;     box-sizing: border-box; }  .clearfix:after {     content: "";     display:block;     clear: both; }  html, body {     margin: 0;     padding: 0;     background-color: #fff;    background:url(images/content.svg) repeat-y, repeat-x;    background-size:100rem; font-size: 15px;   font-style: normal;   font-weight: normal;   color:rgb(119,136,153); } .content-wrapper {  max-width:1520px; min-height: 750px;  }   .heider{ position:sticky; top:0; z-index:200;  transition: top 0.7s; width: 100%; display:inline-block;     background: #fff;     text-align:right; }  .footer {     width:100%;     height: 60px;     background: #364850;     color: #fff;     overflow: hidden; }

Изображение

------

84650__ShJQEkZyBq3r8Y4EYH47FxCqx8IvuD21SgIsnUG3EDIw76OwNp59ZL1UhIEaj2zUnm_4klf60hXQWq7inPd5TS.jpg (76.8 Kb)
Скачиваний: 134

________
посл. ред. 27.11.2022 в 21:35; всего 2 раз(а); by pyrokinesis

pyrokinesis (27 нояб 2022, в 21:34)
не могу понять почему футер и верхнее меню при уменьшении окна браузера cжимаются хоть и стоит размер width:100%;

html

   <div class="content-wrapper">       <heider>тут меню </heider>                        <div class="container clearfix">             <main class="content">             тут основной контейнер   </main>     </div>            <footer class="footer">            Footer         </footer>           </div>

css

   * {     -webkit-box-sizing: border-box;     -moz-box-sizing: border-box;     box-sizing: border-box; }  .clearfix:after {     content: "";     display:block;     clear: both; }  html, body {     margin: 0;     padding: 0;     background-color: #fff;    background:url(images/content.svg) repeat-y, repeat-x;    background-size:100rem; font-size: 15px;   font-style: normal;   font-weight: normal;   color:rgb(119,136,153); } .content-wrapper {  max-width:1520px; min-height: 750px;  }   .heider{ position:sticky; top:0; z-index:200;  transition: top 0.7s; width: 100%; display:inline-block;     background: #fff;     text-align:right; }  .footer {     width:100%;     height: 60px;     background: #364850;     color: #fff;     overflow: hidden; }

Может стоит добавить max-width?

Dusty , пробовал не хочет (((

Width: 100% это относительное значение. Используй явное (width: 100px)

REWERK , пробовал, получается в маленьком окне норм , а в развернутом слишком большое (((

pyrokinesis , min-width: 100px; width: 100%;

REWERK (27 нояб 2022, в 22:24)

pyrokinesis , min-width: 100px; width: 100%;

нашел причину, все дело в мета тегах

html

   <meta http-equiv="X-UA-Compatible" content="IE=edge">      <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0">      <meta name="HandheldFriendly" content="true">      <meta name="MobileOptimized" content="width">      <meta content="yes" name="apple-mobile-web-app-capable">