Question

我有一个CSS问题。

我有来自codepen.io的 DEMO 页面。

在此演示中，您可以看到有一个Click Show按钮。单击该按钮后，.notificatonContainer div将成功打开。但我想在浏览器屏幕.notificatonContainer时更改width:100%; div @media all and (max-width: 580px)，但是当您更改浏览器尺寸width<580px时，width:100%;无效。

我如何解决这个问题，任何人都可以在这方面帮助我？

HTML

<div class="header-menu">
  <div class="header-menu-wrap">
    <div class="header-left">
    </div>
    <div class="header-right">
      <a href="">
        <div class="home-page">
          <div class="icon-header-home icon-home-1"></div>
        </div>
      </a>
      <div class="home-page">
        <div class="icon-header-homea"></div>
      </div>
      <div class="home-page">
        <div class="tter">

            <span id='conversation_count_notification' class='not_count'></span>
            <div class="icon-header-home icon-bell aa">Click Show</div>

          <div class="notificationContainer">
            <div id="notificationTitle">SOME TEXT</div>

            <div id="notifications" class="notifications">
              <div class="some-content-related-div" id="notifications_container">
                <a href=" " class="noti_a  ">
                  <div class="noti_stbody" id=" ">
                    <div class="noti_stimg">
                      <img src=" " class='noti_face' alt=' ' />
                    </div>
                    <div class="noti_sttext">
                      <div class="bildirilen_adi_bildirim_kimligi">
                        <div class="noti_username">fdsafasdf</div>
                        <div class="notif_stat">fdsafasf</div>
                      </div>
                      <div class="bildirilen_mesaj">fdsfa</div>
                    </div>
                  </div>
                </a>
              </div>
            </div>
            <div id="notificationFooter"><a href="">Show All</a></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</div>

CSS

 .notificationContainer {
  min-width: 300px;
  background-color: #009688;
  -webkit-border-bottom-right-radius: 3px;
  -webkit-border-bottom-left-radius: 3px;
  -moz-border-radius-bottomright: 3px;
  -moz-border-radius-bottomleft: 3px;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;
  overflow: hidden;
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
  -webkit-transform: translate(-50%, 0);
  -o-transform: translate(-50%, 0);
  -moz-transform: translate(-50%, 0);
  margin-top: 41px;
  display: none;
}
 @media all and (max-width: 580px) {
  .header-left {
    width: 100%;
    padding-bottom: 5px;
  }
  .header-right {
    width: 100%;
    height:28px;
  }
  .home-page {
    width: 18%;
    margin-left: 0px;
    padding-left: 5px;
    padding-right: 5px;
  }
  .header-menu-wrap {
    padding: 0px;
  }
  .header-menu {
    padding-bottom: 0px;
  }
.notificationContainer{

  position: absolute;
  right:0; 
  left:0;   /*changed here*/
  min-width:100%;  /*changed here*/
  height:auto;
  z-index: 1000;
  font-size: 14px;
  text-align: left;
  background-color:#009688;
-webkit-border-bottom-right-radius: 3px;
-webkit-border-bottom-left-radius: 3px;
-moz-border-radius-bottomright: 3px;
-moz-border-radius-bottomleft: 3px;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
    overflow:hidden;
margin-top: 50px;
display:none;
}

}

Answer 1

您的.notificationContainer上有transform: translate(50% 0);。因此，在您的媒体查询中，您需要使用transform: translate(0);覆盖该内容。

应该这样做。

CSS div不是宽度：100％

1 个答案: