无法使绝对定位的元素占据容器的整个高度

时间:2019-11-16 00:44:14

标签: html css responsive-design

我正在尝试使newUserAccounts窗格占据其容器的整个高度$taskAction->passwords,我可以通过给.info来完成此工作,但是我不能将.card设为绝对,因为我将要列出这些卡,并且与.card { position: absolute; }一起将它们堆叠在一起。这是代码:

HTML

.card

CSS

position:absolute;

我不能给 <div class="project-list"> <div class="card"> <div class="info"> <div class="info-section"> <h3 class="title">Project Title</h3> <p class="description"> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cupiditate ut perspiciatis est sit architecto molestiae illo debitis accusantium laboriosam labore! </p> </div> <div class="info-section"> <span>Technologies used: <ul> <li>ReactJs</li> <li>Express</li> <li>Redux</li> <li>MongoDB</li> </ul></span> </div> <div class="info-section"> <div class="github-url">Github Url: <a href="www.github.com">www.github.com</a></div> <div class="demo">Click to Open Demo</i> </div> </div> </div> <div class="img-container"> <img src="https://images.unsplash.com/photo-1570419844482-a232abf0b402?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt=""> </div> </div> </div> 一个静态的* { box-sizing: border-box; } .card { width: 100%; height: auto; background-color: #ccc; margin: auto; position: absolute; z-index: 0; } .card .info { position: absolute; width: 200px; background-color: #ff729f; z-index: -1; color: #000; padding: 10px; overflow-y: scroll; top: 0; bottom: 0; } .info::-webkit-scrollbar { width: 4px; } .info::-webkit-scrollbar-thumb { background: #888; } .info::-webkit-scrollbar-thumb:hover { background: #555; } .card:hover .info, .card:active .info { z-index: 2; box-shadow: 10px 0 10px -1px rgba(40, 40, 40, 0.75); } .card:hover .img-container { opacity: 0.6; } .card:hover .img-container img { box-shadow: unset; } .card .info .info-section { border-bottom: 0.8px solid rgba(100, 100, 100, 0.8); margin-bottom: 10px; } .card .info .info-section:last-child { border-bottom: none; } .card .info .info-section .demo { margin: 10px 0; padding: 10px 5px; background-color: red; color: white; border-radius: 4px; border-top-right-radius: 100%; border-bottom-right-radius: 100%; cursor: pointer; } .card .img-container { width: calc(100% - 100px); height: 100%; transition: 100ms ease-in; background-color: #blue; float: right; } .card .img-container img { width: 100%; height: auto; float: right; box-shadow: -10px 0 8px -1px rgba(40, 40, 40, 0.75); } ,因为它必须完全响应。

1 个答案:

答案 0 :(得分:1)

解决此问题的一种方法是将$ cat ./main.c #include <stdio.h> #include <stdbool.h> int main( int argc, char* argv ) { int i; int* p = &i; int* n = NULL; printf( "%zu\n", sizeof( (bool)p ) ); printf( "%p - %d\n", p, (bool)p ); printf( "%p - %d\n", n, (bool)n ); printf( "%d\n", (bool)3 ); return 0; } 中的$ gcc --version gcc (GCC) 8.2.1 20181215 (Red Hat 8.2.1-6) Copyright (C) 2018 Free Software Foundation, Inc. This is free software; see the source for copying conditions. There is NO warranty; not even for MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. 更改为$ gcc -g ./main.c && ./a.out 1 0x7ffdac3290bc - 1 (nil) - 0 1 。这样做的缺点是需要声明position。我看到您说的不是静态高度,但是一定比例也会起作用,并有助于使页面保持一定的响应速度。

.card