jquery - CSS div 的宽度不能为 :100%

Question

我有一个 CSS 问题。

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

在此演示中，您可以看到有一个“单击显示”按钮。当您单击该按钮时，然后 .notificatonContainer div 将成功打开。但我想更改 .notificatonContainer分区 width:100%;当浏览器屏幕 @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); 覆盖它。

应该这样做。