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

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

有一个密码

  1. let cataloglistbutton=document.querySelector('.catalogbutton');
  2. cataloglistbutton.onclick = function () {
  3. console.log('Before');
  4. if (document.getElementById('dropdownwindow').style.display="none")
  5. {
  6. document.getElementById('dropdownwindow').style.display="block";
  7. console.log(document.getElementById('dropdownwindow').style.display);
  8. document.getElementById('dropdownwindow').style.marginRight="40%";
  9. document.getElementById('dropdownwindow').style.marginBottom="0px";
  10. } else {
  11. document.getElementById('dropdownwindow').style.display="none";
  12. console.log(document.getElementById('dropdownwindow').style.display);
  13. document.getElementById('dropdownwindow').style.marginRight="100%";
  14. document.getElementById('dropdownwindow').style.marginBottom="0px";
  15. };
  16. console.log('After');
  17. }
  1. $* {
  2. list-style: none;
  3. text-decoration: none;
  4. margin: 0;
  5. padding: 0;
  6. }
  7. .menu {
  8. position: relative;
  9. width: 300px;
  10. }
  11. .menu ul {
  12. list-style-type: none;
  13. margin: 0;
  14. padding: 0;
  15. }
  16. .menu li {
  17. padding: 0.5em 0 0.5em 0.3em;
  18. cursor: pointer;
  19. }
  20. ul.level1 {
  21. border: 1px solid thistle;
  22. }
  23. ul.level1>li {
  24. background-color: #fff;
  25. border-bottom: 1px solid thistle;
  26. display: flex;
  27. flex-direction: row;
  28. align-items: center;
  29. justify-content: space-between;
  30. }
  31. ul.level1>li:last-child {
  32. border-bottom: none;
  33. }
  34. ul.level2 {
  35. position: absolute;
  36. top: 0;
  37. left: 100%;
  38. width: 559px;
  39. height: 100vh;
  40. padding: 0.5em 0.3em 0.5em 0.3em;
  41. background-color: #fff;
  42. border: 1px solid thistle;
  43. visibility: hidden;
  44. white-space: nowrap;
  45. column-count: 2;
  46. }
  47. ul.level2>li {
  48. padding: 0;
  49. border-bottom: 1px solid #fff;
  50. }
  51. ul.level2>ul>li {
  52. padding: 0;
  53. }
  54. ul.level2>li>ul>li {
  55. padding: 0;
  56. }
  57. ul.level1>li:hover ul.level2 {
  58. visibility: visible;
  59. }
  60. ul.level2 > li.submenu > ul > ul.innerUL>li.submenu__title {
  61. padding: 0;
  62. margin: 0;
  63. margin-bottom: 5px;
  64. }
  65. ul.level2 > li.submenu > ul > ul.innerUL>li.submenu__item {
  66. padding: 0;
  67. margin: 0;
  68. /*margin-bottom: 5px;*/
  69. }
  70. .menu a {
  71. color: #333;
  72. }
  73. .alignblock {
  74. text-align: center;
  75. vertical-align: middle;
  76. }
  77. .submenu__title {
  78. margin-bottom: 5px;
  79. }
  80. .submenu__title a {
  81. display: block;
  82. color: black;
  83. font: 13px Roboto, Tachoma, Arial, sans-serif;
  84. /* line-height: 1.5; */
  85. text-decoration: none;
  86. padding: 3px 5px;
  87. }
  88. .submenu__item {
  89. /* margin-bottom: 0px; */
  90. }
  91. .submenu__item a {
  92. display: block;
  93. color: gray;
  94. font: 13px Roboto, Tachoma, Arial, sans-serif;
  95. text-decoration: none;
  96. padding: 3px 5px;
  97. }
  98. .leftside {
  99. margin-left: 16px;
  100. display: inline-block;
  101. width: 30px;
  102. height: 30px;
  103. display: flex;
  104. }
  105. .rightside {
  106. margin-right: 16px;
  107. /* display: none;*/
  108. visibility: hidden;
  109. width: 30px;
  110. height: 30px;
  111. display: inline-flex;
  112. }
  113. .centerplace {
  114. width: 328px;
  115. display: inline-flex;
  116. align-items: center;
  117. justify-content: center;
  118. }
  119. .nestedblock{
  120. display: inline-flex;
  121. align-items: center;
  122. justify-content: center;
  123. margin:0 auto;
  124. }
  125. # sidemenu.-short {
  126. flex-direction: column;
  127. }
  128. # sidemenu.-short .centerplace,
  129. # sidemenu.-short .centerplace .nestedblock,
  130. # sidemenu.-short .rightside {
  131. display: none;
  132. }
  133. .contentpart {
  134. display: grid;
  135. grid-template-areas: "leftsidemenu centercolumn rightsidemenu";
  136. grid-template-columns: 300px 1fr 245.8px;
  137. /*height: 100vh;*/
  138. margin: 0;
  139. grid-area: centerpart;
  140. }
  141. .leftmenu {
  142. grid-area: leftsidemenu;
  143. }
  144. .centerarea {
  145. grid-area: centercolumn;
  146. background-color: rgb(255, 255, 255);
  147. }
  148. .rightmenu {
  149. grid-area: rightsidemenu;
  150. }
  151. # pageHeader {
  152. grid-area: header;
  153. width: 100%;
  154. }
  155. # pageHeader .headerinsides {
  156. padding-left: 65px;
  157. padding-right: 65px;
  158. padding-top: 10px;
  159. padding-bottom: 10px;
  160. width: 100%;
  161. display: flex;
  162. justify-content: space-between;
  163. font: 18px "PT Sans",sans-serif;
  164. /*align-items: center;*/
  165. }
  166. .icon {
  167. align-self: center;
  168. }
  169. # pageHeader .labelforicon {
  170. padding-left: 10px;
  171. align-self: center;
  172. font: 18px "PT Sans",sans-serif;
  173. }
  174. .flexcitylink {
  175. display: flex;
  176. flex: 60px;
  177. width: 100%;
  178. }
  179. .flexcitylinkwrapper {
  180. display: flex;
  181. }
  182. /*
  183. .headerparamswrapper {
  184. display: flex;
  185. margin-left: auto;
  186. }
  187. * /
  188. .intermediatespace {
  189. margin-left: auto;
  190. flex: 30%;
  191. }
  192. .telephonenumber {
  193. margin-left: auto;
  194. flex: 30%;
  195. }
  196. .addressandworkschedule {
  197. margin-left: auto;
  198. flex: 20%;
  199. }
  200. .payment {
  201. margin-left: auto;
  202. flex: 10%;
  203. }
  204. .delivery {
  205. margin-left: auto;
  206. flex: 10%;
  207. }
  208. # pageHeader .headerinsidessecondrow {
  209. padding-left: 0px;
  210. padding-right: 0px;
  211. width: 100%;
  212. height: 57px;
  213. display: flex;
  214. /*justify-content: space-between;*/
  215. align-items: center;
  216. font: 16px "PT Sans",sans-serif;
  217. }
  218. .catalogbutton{
  219. margin-left: auto;
  220. margin-right: auto;
  221. flex: 22.5%;
  222. height: 41px;
  223. }
  224. .betweenspace {
  225. flex: 7.5%;
  226. }
  227. .inputsearch {
  228. margin-left: auto;
  229. flex: 80%;
  230. height: 41px;
  231. /*border-bottom-width: 0px;*/
  232. /*height: 32px;*/
  233. }
  234. .searchbutton {
  235. margin-left: auto;
  236. flex: 20%;
  237. height: 41px;
  238. }
  239. .findinfo {
  240. flex: 40%;
  241. display: flex;
  242. justify-content: stretch;
  243. }
  244. .secondbetweenspace {
  245. flex: 10%;
  246. }
  247. .loginandsignup {
  248. margin-left: auto;
  249. /*margin-right: 0px;*/
  250. display: flex;
  251. align-items: center;
  252. flex: 10%;
  253. display: flex;
  254. justify-content: flex-start;
  255. align-self: center;
  256. }
  257. .basket {
  258. margin-left: auto;
  259. /*margin-right: 0px;*/
  260. display: flex;
  261. align-items: center;
  262. flex: 10%;
  263. display: flex;
  264. justify-content: flex-start;
  265. align-self: center;
  266. }
  267. /*#wholeblock {
  268. display: flex;
  269. }*/
  270. # dropdownwindow {
  271. display: none;
  272. left: 0;
  273. margin-right: 100%;
  274. height: 100vh;
  275. }
  276. # fullblock {
  277. height: 100vh;
  278. }
  279. # pageFooter {
  280. grid-area: footer;
  281. width: 100%;
  282. }
  283. .bodyclass {
  284. display: grid;
  285. grid-template-areas: "header" "centerpart" "footer";
  286. grid-template-rows: 100px 1fr 743px;
  287. height: 100vh;
  288. margin: 0;
  289. }
  290. /*
  291. .cl-kit .FilterGroupNewDesign{
  292. margin-top: 5px;
  293. }
  294. * /
  295. .FilterBlockNewDesign{
  296. margin-bottom: 50px;
  297. }
  298. /*
  299. .cl-kit .FilterGroupNewDesign {
  300. padding-bottom: 10px;
  301. margin-bottom:5px;
  302. }
  303. * /
  304. .b-footer__container {
  305. background-color: #000;
  306. }
  307. .text {
  308. font: 14px Roboto,Helvetica,Arial,sans-serif;
  309. /*margin-bottom: 5px;*/
  310. /*align-items: stretch;*/
  311. /*white-space: pre;*/
  312. }
  313. /*
  314. .spaces {
  315. white-space: pre;
  316. }
  317. * /
  318. .ProductCardBlock {
  319. width: 100%;
  320. display: flex;
  321. flex-direction: row;
  322. justify-content: stretch;
  323. height: 178px;
  324. /*position: relative;*/
  325. }
  326. .ProductCardBlock .ProductImage {
  327. /*width: calc(191.5/931.75)*100%;*/
  328. /*width: 20%;*/
  329. height: 100%;
  330. /*position: absolute;*/
  331. width: 220px;
  332. }
  333. .ProductCardBlock .ProductImage #ImageWrapper .ProductPicture {
  334. margin-left: 15px;
  335. margin-top: 20px;
  336. margin-right: 5px;
  337. /*position: absolute;*/
  338. }
  339. .ProductCardBlock .ProductDescription {
  340. /*width: 70%;*/
  341. margin-top: 20px;
  342. font: 14px Roboto, Tachoma, Arial, sans-serif;
  343. /*position: absolute;*/
  344. /*flex: 6;*/
  345. }
  346. .ProductCardBlock .ProductDescription .ProductName {
  347. margin-bottom: 15px;
  348. font: 16px Roboto, Tachoma, Arial,sans-serif;
  349. /*position: absolute;*/
  350. }
  351. .ProductScreenParams,
  352. .ProductCpuType,
  353. .ProductCpuFrequency,
  354. .ProductRAMWrapper,
  355. .ProductVideoCard,
  356. .ProductDisksAndDrives {
  357. font: 14px Roboto, Tachoma, Arial,sans-serif;
  358. /*white-space: pre;*/
  359. }
  360. .ProductCardBlock .ProductDescription .ProductScreenParamsWrapper {
  361. font: 14px Roboto, Tachoma, Arial,sans-serif;
  362. padding-bottom: 0px;
  363. margin-bottom: 5px;
  364. }
  365. .ProductCardBlock .ProductDescription .ProductCpuTypeWrapper {
  366. font: 14px Roboto, Tachoma, Arial,sans-serif;
  367. margin-bottom: 5px;
  368. }
  369. .ProductCardBlock .ProductDescription .ProductCpuFrequencyWrapper {
  370. font: 14px Roboto, Tachoma, Arial,sans-serif;
  371. margin-bottom: 5px;
  372. }
  373. .ProductCardBlock .ProductDescription .ProductRAMWrapper {
  374. font: 14px Roboto, Tachoma, Arial,sans-serif;
  375. margin-bottom: 5px;
  376. }
  377. .ProductCardBlock .ProductDescription .ProductVideoCardWrapper {
  378. font: 14px Roboto, Tachoma, Arial,sans-serif;
  379. margin-bottom: 5px;
  380. }
  381. .ProductCardBlock .ProductDescription .ProductDisksAndDrivesWrapper {
  382. font: 14px Roboto, Tachoma, Arial,sans-serif;
  383. margin-bottom: 5px;
  384. }
  385. /*.ProductCardBlock */.ProductBuyPart {
  386. margin-top: auto;
  387. margin-bottom: auto;
  388. padding-top: auto;
  389. padding-bottom: auto;
  390. margin-left: auto;
  391. margin-right: 40px;
  392. }
  393. /*.ProductCardBlock .ProductBuyPart */.ProductAddToBasket {
  394. /*margin: auto;
  395. padding: auto;*/
  396. width: 80px;
  397. height: 40px;
  398. background-color: rgb(255,128,0);
  399. border-color: rgb(255,128,0);
  400. border-radius: 10px;
  401. color: white;
  402. /*position: absolute;*/
  403. }
  404. .IconFont_arrow_01_B:before{content:"\f103"}.IconFont_arrow_01_L:before{content:"\f104"}.IconFont_arrow_01_R:before{content:"\f105"}
  1. <div id="fullblock">
  2. <div id="dropdownwindow">
  3. </div>
  4. <header id="pageHeader">
  5. <!--<div class="headerinsides">
  6. <a href="#" class="flexcitylink">
  7. <div class="icon">
  8. <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>
  9. </div>
  10. <div class="mainpart">
  11. Краснодар
  12. </div>
  13. </a>
  14. <div class="headerparamswrapper">
  15. <div class="intermediatespace">
  16. </div>
  17. <div class="telephonenumber">
  18. 8 (800)6003900 (круглосуточно)
  19. </div>
  20. <div class="addressandworkschedule">
  21. Адрес и график работы
  22. </div>
  23. <div class="payment">
  24. Оплата
  25. </div>
  26. <div class="delivery">
  27. Доставка
  28. </div>
  29. </div>
  30. </div>-->
  31. <div class="headerinsides">
  32. <span class="flexcitylinkwrapper">
  33. <a href="#" class="flexcitylink">
  34. <span class="icon">
  35. <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>
  36. </span>
  37. <span class="labelforicon">
  38. Краснодар
  39. </span>
  40. </a>
  41. </span>
  42. <span class="intermediatespace">
  43. </span>
  44. <span class="telephonenumber">
  45. 8 (800) 600 3900 (круглосуточно)
  46. </span>
  47. <span class="addressandworkschedule">
  48. Адрес и график работы
  49. </span>
  50. <span class="payment">
  51. Оплата
  52. </span>
  53. <span class="delivery">
  54. Доставка
  55. </span>
  56. </div>
  57. <div class="headerinsidessecondrow">
  58. <button class="catalogbutton">Каталог товаров</button>
  59. <span class="betweenspace">
  60. </span>
  61. <span class="findinfo">
  62. <input placeholder="Поиск среди 10000 товаров" class="inputsearch"></input>
  63. <button class="searchbutton">Найти</button>
  64. </span>
  65. <span class="secondbetweenspace">
  66. </span>
  67. <span class="loginandsignup">
  68. <span class="loginsignupimg">
  69. <img src="../images/header_profile-icon.png">
  70. </span>
  71. <span class="loginsignuptext">
  72. Вход и регистрация
  73. </span>
  74. </span>
  75. <span class="basket">
  76. <span class="loginsignupimg">
  77. <img src="../images/header_cart-icon.png">
  78. </span>
  79. <span class="loginsignuptext">
  80. Корзина
  81. </span>
  82. </span>
  83. </div>
  84. </header>
  85. <div class="contentpart">
  86. </div>

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


应显示为on

暂无答案!

目前还没有任何答案,快来回答吧!

相关问题