有一个密码
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
暂无答案!
目前还没有任何答案,快来回答吧!