弹出式固定响应式滚动

时间：2019-03-20 11:14:44

标签： html css scroll

我正在使弹出框固定响应，唯一的问题是当高度太小时，内容被隐藏。我希望内容可滚动，但滚动条不在弹出窗口中，而是在主滚动条中。

就像popin会占用全部内容高度并使用页面滚动。

HTML

<body style="background:red;"    >
<div class="message">
    <span class="close" style="position: absolute;right: 0.35em;top:0.3em;color:#31A947">X</span>
    <div style="background:#3a2c81;overflow:hidden;">
        <div class="pop-ctn"><article style="text-align:center;flex:1;"> 
            <img style="margin-top:2.4em;margin-left:1em;width:338px;" src="/servlet/com.univ.utils.LectureImageToolbox?TAG=[id-image]7307[/id-image]" class="visuargu" alt="[legende-image]7299[/legende-image]" title="[title-image]7299[/title-image]" /> </article> 
            <article style="flex:2;color:white;text-align:justify;padding:2em 2.5em"> Je fais mes démarches administratives quand ça me chante,
               même à 2H30 du matin&#160;
               ! Et si vous faisiez comme moi&#160;
               ? &#160;
               <br />&#160;
               <br />Illimité ou Sur Mesure, 
               votre abonnement Libertan est accessible sur votre compte eServices&#160;
               à <strong>tout moment</strong>&#160;
              : &#160;
              <br /><br />
              <ul>
                 <li>Gérez votre abonnement</li>
                 <li>Consultez vos attestations et relevés de consommation</li> 
                 <li>Changez de RIB</li>
                 <li>Demandez un duplicata</li>
              </ul>
              <strong>Vous aussi,
                 osez dire non à la paperasse. Non au gaspillage de temps&#160;
              ! </strong> 
             <style type="text/css">.pop-ctn {
                    display: flex;
                 }

             @media screen and (max-width: 950px) {
                  .pop-ctn {
                  display: flex;
                  flex-direction: column;
            }
    </style>
  </article>
  </div></div>
</div>

CSS

.message {
  position: fixed; 
  z-index: 9999;
  background: white; 
  text-align: center; 
  display: block;
  padding: 1.5em;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  max-width:920px;
  right: 0; 
  top: 50%; 
  transform: translateY(-50%); 
  right: 0;}

0 个答案:

没有答案