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

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

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

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



 <div class="content-wrapper">

 

 

     <heider>тут меню </heider>      

         

         <div class="container clearfix">

             <main class="content">

            

 тут основной контейнер

 

  </main>

     </div>

     

     

  <footer class="footer">

            Footer

         </footer>  

        

 </div>



 

 

 

 * {

     -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)
Скачиваний: 113

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

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



 <div class="content-wrapper">

 

 

     <heider>тут меню </heider>      

         

         <div class="container clearfix">

             <main class="content">

            

 тут основной контейнер

 

  </main>

     </div>

     

     

  <footer class="footer">

            Footer

         </footer>  

        

 </div>



 

 

 

 * {

     -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%;

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

 <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">