​ 插入而不是拉伸到整个高度

93ze6v8z  于 2021-09-13  发布在  Java
关注(0)|答案(0)|浏览(279)

有一个密码

let cataloglistbutton=document.querySelector('.catalogbutton');
        cataloglistbutton.onclick = function () {
            console.log('Before');
            if (document.getElementById('dropdownwindow').style.display="none")
            {
                document.getElementById('dropdownwindow').style.display="block";
                console.log(document.getElementById('dropdownwindow').style.display);
                document.getElementById('dropdownwindow').style.marginRight="40%";
                document.getElementById('dropdownwindow').style.marginBottom="0px";
            } else {
                document.getElementById('dropdownwindow').style.display="none";
                console.log(document.getElementById('dropdownwindow').style.display);
                document.getElementById('dropdownwindow').style.marginRight="100%";
                document.getElementById('dropdownwindow').style.marginBottom="0px";
            };          

            console.log('After');

        }
$* {
  list-style: none;
  text-decoration: none;
  margin: 0;
  padding: 0;
}

    .menu {
      position: relative;
      width: 300px;
    }

    .menu ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
    }

    .menu li {
      padding: 0.5em 0 0.5em 0.3em;
      cursor: pointer;
    }

    ul.level1 {
      border: 1px solid thistle;
    }

    ul.level1>li {
      background-color: #fff;
      border-bottom: 1px solid thistle;
        display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
    }

    ul.level1>li:last-child {
      border-bottom: none;
    }

    ul.level2 {
      position: absolute;
      top: 0;
      left: 100%;
      width: 559px;
      height: 100vh;
      padding: 0.5em 0.3em 0.5em 0.3em;
      background-color: #fff;
      border: 1px solid thistle;
      visibility: hidden;
      white-space: nowrap;
      column-count: 2;
    }

    ul.level2>li {
      padding: 0;
      border-bottom: 1px solid #fff;
    }

    ul.level2>ul>li {
      padding: 0;
    }

    ul.level2>li>ul>li {
      padding: 0;
    }

    ul.level1>li:hover ul.level2 {
      visibility: visible;
    }

    ul.level2 > li.submenu > ul > ul.innerUL>li.submenu__title {
    padding: 0;
    margin: 0;
    margin-bottom: 5px;
}

    ul.level2 > li.submenu > ul > ul.innerUL>li.submenu__item {
    padding: 0;
    margin: 0;
    /*margin-bottom: 5px;*/
}

    .menu a {
      color: #333;
    }

    .alignblock {
      text-align: center;
      vertical-align: middle;
    }

    .submenu__title {
      margin-bottom: 5px;
    }

    .submenu__title a {
      display: block;
      color: black;
      font: 13px Roboto, Tachoma, Arial, sans-serif;
      /* line-height: 1.5; */
      text-decoration: none;
      padding: 3px 5px;
    }

    .submenu__item {
      /* margin-bottom: 0px; */
    }

    .submenu__item a {
      display: block;
      color: gray;
      font: 13px Roboto, Tachoma, Arial, sans-serif;
      text-decoration: none;
      padding: 3px 5px;
    }

.leftside {
  margin-left: 16px;
  display: inline-block;
  width: 30px;
  height: 30px;  
  display: flex;
}

.rightside {
  margin-right: 16px;
  /* display: none;*/
  visibility: hidden;
  width: 30px;
  height: 30px;  
  display: inline-flex;
}

.centerplace {
  width: 328px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.nestedblock{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin:0 auto;
}

# sidemenu.-short {

  flex-direction: column;
}

# sidemenu.-short .centerplace,

# sidemenu.-short .centerplace .nestedblock,

# sidemenu.-short .rightside {

  display: none;
}

.contentpart {
    display: grid;
    grid-template-areas: "leftsidemenu centercolumn rightsidemenu";
    grid-template-columns: 300px 1fr 245.8px;
    /*height: 100vh;*/
    margin: 0;
    grid-area: centerpart;
}

.leftmenu {
    grid-area: leftsidemenu;
}

.centerarea {
    grid-area: centercolumn;
    background-color: rgb(255, 255, 255);
}

.rightmenu {
    grid-area: rightsidemenu;
}

# pageHeader {

    grid-area: header;
    width: 100%;
}

# pageHeader .headerinsides {

        padding-left: 65px;
        padding-right: 65px;
        padding-top: 10px;
        padding-bottom: 10px;
        width: 100%;
        display: flex;
        justify-content: space-between;
        font: 18px "PT Sans",sans-serif;
        /*align-items: center;*/
}

.icon {
        align-self: center;
}

# pageHeader .labelforicon {

        padding-left: 10px;
        align-self: center;
        font: 18px "PT Sans",sans-serif;
}

.flexcitylink {
        display: flex;
        flex: 60px;
        width: 100%;
}

.flexcitylinkwrapper {
    display: flex;
}

/*
.headerparamswrapper {
    display: flex;
    margin-left: auto;
}

* /

.intermediatespace {
        margin-left: auto;
        flex: 30%;
}

.telephonenumber {
        margin-left: auto;
        flex: 30%;
}

.addressandworkschedule {
        margin-left: auto;
        flex: 20%;
}

.payment {
        margin-left: auto;
        flex: 10%;
}

.delivery {
        margin-left: auto;
        flex: 10%;
}

# pageHeader .headerinsidessecondrow {

        padding-left: 0px;
        padding-right: 0px;
        width: 100%;
        height: 57px;
        display: flex;
        /*justify-content: space-between;*/
        align-items: center;
        font: 16px "PT Sans",sans-serif;
}

.catalogbutton{
    margin-left: auto;
    margin-right: auto; 
    flex: 22.5%;
    height: 41px;
}

.betweenspace {
    flex: 7.5%;
}

.inputsearch {
    margin-left: auto;
    flex: 80%;
    height: 41px;
    /*border-bottom-width: 0px;*/
    /*height: 32px;*/
}

.searchbutton {
    margin-left: auto;
    flex: 20%;
    height: 41px;
}

.findinfo {
    flex: 40%;
    display: flex;
    justify-content: stretch;
}

.secondbetweenspace {
    flex: 10%;
}

.loginandsignup {
    margin-left: auto;
    /*margin-right: 0px;*/
    display: flex;
    align-items: center;
    flex: 10%;
    display: flex;
    justify-content: flex-start;
    align-self: center;
}

.basket {
    margin-left: auto;
    /*margin-right: 0px;*/
    display: flex;
    align-items: center;
    flex: 10%;
    display: flex;
    justify-content: flex-start;
    align-self: center;
}

/*#wholeblock {
    display: flex;
}*/

# dropdownwindow {

    display: none;
    left: 0;
    margin-right: 100%;
    height: 100vh;
}

# fullblock {

    height: 100vh;
}

# pageFooter {

    grid-area: footer;
    width: 100%;
}

.bodyclass {
    display: grid;
    grid-template-areas: "header" "centerpart" "footer";
    grid-template-rows: 100px 1fr 743px;
    height: 100vh;
    margin: 0;
}

/*
.cl-kit .FilterGroupNewDesign{
    margin-top: 5px;
}

* /

.FilterBlockNewDesign{
    margin-bottom: 50px;
}

/*
.cl-kit .FilterGroupNewDesign {
    padding-bottom: 10px;
    margin-bottom:5px;
}

* /

.b-footer__container {
    background-color: #000;
}

.text {
    font: 14px Roboto,Helvetica,Arial,sans-serif;
    /*margin-bottom: 5px;*/
    /*align-items: stretch;*/
    /*white-space: pre;*/
}
/*
.spaces {
    white-space: pre;
}

* /

.ProductCardBlock {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: stretch;
    height: 178px;
    /*position: relative;*/
}

.ProductCardBlock .ProductImage {
    /*width: calc(191.5/931.75)*100%;*/
    /*width: 20%;*/
    height: 100%;
    /*position: absolute;*/
    width: 220px;
}

.ProductCardBlock .ProductImage #ImageWrapper .ProductPicture {
    margin-left: 15px;
    margin-top: 20px;
    margin-right: 5px;
    /*position: absolute;*/
}

.ProductCardBlock .ProductDescription {
    /*width: 70%;*/
    margin-top: 20px;
    font: 14px Roboto, Tachoma, Arial, sans-serif;
    /*position: absolute;*/
    /*flex: 6;*/
}

.ProductCardBlock .ProductDescription .ProductName {
    margin-bottom: 15px;
    font: 16px Roboto, Tachoma, Arial,sans-serif;
    /*position: absolute;*/
}

.ProductScreenParams,
.ProductCpuType,
.ProductCpuFrequency,
.ProductRAMWrapper,
.ProductVideoCard,
.ProductDisksAndDrives {
    font: 14px Roboto, Tachoma, Arial,sans-serif;
    /*white-space: pre;*/
}

.ProductCardBlock .ProductDescription .ProductScreenParamsWrapper {
    font: 14px Roboto, Tachoma, Arial,sans-serif;
    padding-bottom: 0px;
    margin-bottom: 5px;
}

.ProductCardBlock .ProductDescription .ProductCpuTypeWrapper {
    font: 14px Roboto, Tachoma, Arial,sans-serif;
    margin-bottom: 5px;
}

.ProductCardBlock .ProductDescription .ProductCpuFrequencyWrapper {
    font: 14px Roboto, Tachoma, Arial,sans-serif;
    margin-bottom: 5px;
}

.ProductCardBlock .ProductDescription .ProductRAMWrapper {
    font: 14px Roboto, Tachoma, Arial,sans-serif;
    margin-bottom: 5px;
}

.ProductCardBlock .ProductDescription .ProductVideoCardWrapper {
    font: 14px Roboto, Tachoma, Arial,sans-serif;
    margin-bottom: 5px;
}

.ProductCardBlock .ProductDescription .ProductDisksAndDrivesWrapper {
    font: 14px Roboto, Tachoma, Arial,sans-serif;
    margin-bottom: 5px;
}

/*.ProductCardBlock */.ProductBuyPart {
    margin-top: auto;
    margin-bottom: auto;
    padding-top: auto;
    padding-bottom: auto;
    margin-left: auto;
    margin-right: 40px;
}

/*.ProductCardBlock .ProductBuyPart */.ProductAddToBasket {
    /*margin: auto;
    padding: auto;*/
    width: 80px;
    height: 40px;
    background-color: rgb(255,128,0);
    border-color: rgb(255,128,0);
    border-radius: 10px;    
    color: white;
    /*position: absolute;*/
}

.IconFont_arrow_01_B:before{content:"\f103"}.IconFont_arrow_01_L:before{content:"\f104"}.IconFont_arrow_01_R:before{content:"\f105"}
<div id="fullblock">
<div id="dropdownwindow">
</div>
<header id="pageHeader">
<!--<div class="headerinsides">
        <a href="#" class="flexcitylink">
                <div class="icon">
                        <svg aria-hidden="true" class="Sg" width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M8.057 8a2.012 2.012 0 01-2.019-2c0-1.103.906-2 2.02-2 1.113 0 2.018.897 2.018 2s-.905 2-2.019 2zm0-5C6.387 3 5.03 4.346 5.03 6s1.358 3 3.028 3 3.029-1.346 3.029-3-1.359-3-3.029-3zm0 11.777C6.852 13.5 3.01 9.177 3.01 6c0-2.757 2.264-5 5.047-5 2.784 0 5.047 2.243 5.047 5 0 3.174-3.841 7.5-5.047 8.777zM8.057 0C4.717 0 2 2.691 2 6c0 4.159 5.468 9.623 5.7 9.854a.509.509 0 00.714 0c.233-.23 5.7-5.695 5.7-9.854 0-3.309-2.716-6-6.057-6z" fill="currentColor"></path></svg>
                </div>
                <div class="mainpart">
                 Краснодар
                </div>
        </a>
                <div class="headerparamswrapper">
                <div class="intermediatespace">
                </div>
                <div class="telephonenumber">
                8 (800)6003900 (круглосуточно)
                </div>
                <div class="addressandworkschedule">
                    Адрес и график работы
                </div>
                <div class="payment">
                    Оплата
                </div>
                <div class="delivery">
                    Доставка
                </div>
                </div>
</div>-->
<div class="headerinsides">
        <span class="flexcitylinkwrapper">
        <a href="#" class="flexcitylink">
                <span class="icon">
                        <svg aria-hidden="true" class="Sg" width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M8.057 8a2.012 2.012 0 01-2.019-2c0-1.103.906-2 2.02-2 1.113 0 2.018.897 2.018 2s-.905 2-2.019 2zm0-5C6.387 3 5.03 4.346 5.03 6s1.358 3 3.028 3 3.029-1.346 3.029-3-1.359-3-3.029-3zm0 11.777C6.852 13.5 3.01 9.177 3.01 6c0-2.757 2.264-5 5.047-5 2.784 0 5.047 2.243 5.047 5 0 3.174-3.841 7.5-5.047 8.777zM8.057 0C4.717 0 2 2.691 2 6c0 4.159 5.468 9.623 5.7 9.854a.509.509 0 00.714 0c.233-.23 5.7-5.695 5.7-9.854 0-3.309-2.716-6-6.057-6z" fill="currentColor"></path></svg>
                </span>
                <span class="labelforicon">
                 Краснодар
                </span>
        </a>
        </span>
                <span class="intermediatespace">
                </span>
                <span class="telephonenumber">
                8 (800) 600 3900 (круглосуточно)
                </span>
                <span class="addressandworkschedule">
                    Адрес и график работы
                </span>
                <span class="payment">
                    Оплата
                </span>
                <span class="delivery">
                    Доставка
                </span>     
</div>
<div class="headerinsidessecondrow">
<button class="catalogbutton">Каталог товаров</button>

<span class="betweenspace">
</span>

<span class="findinfo">
        <input placeholder="Поиск среди 10000 товаров" class="inputsearch"></input>
        <button class="searchbutton">Найти</button>
</span>

<span class="secondbetweenspace">
</span>

<span class="loginandsignup">
    <span class="loginsignupimg">
        <img src="../images/header_profile-icon.png">
    </span>
    <span class="loginsignuptext">
        Вход и регистрация
    </span>
</span>

<span class="basket">
    <span class="loginsignupimg">
        <img src="../images/header_cart-icon.png">
    </span>
    <span class="loginsignuptext">
        Корзина
    </span>
</span>
</div>

</header>

<div class="contentpart">
</div>

因此，单击产品目录按钮后 .dropdownwindow 块位于站点标题上方，而不是窗口的整个高度。告诉我如何实现将块拉伸到窗口的全部高度。


应显示为on

JavaScriptHtmlwebcssLayout

暂无答案！

目前还没有任何答案，快来回答吧！

我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com