將高度設置爲高度30％的parrent高度的100％？

Question

html, body, ul { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
#loginwindow { 
 
    position: fixed; 
 
    display: block; 
 
    top: 50%; 
 
    left: 50%; 
 
    visibility: visible; 
 
    width: 30%; 
 
    height: 30%; 
 
    margin: -15% 0 0 -15%; 
 
    text-align: center; 
 
    float: center; 
 
    border: 1px solid black; 
 
    background-color: white; 
 
} 
 

 
#closeloginwindow { 
 
    position: absolute; 
 
    top: 20px; 
 
    right: 20px; 
 
    transition: .25s; 
 
    color: #000; 
 
    border: none; 
 
    outline: none; 
 
    background-color: transparent; 
 
    font-size: 12pt; 
 
} 
 

 
#closeloginwindow:hover { 
 
    color: #555; 
 
} 
 

 
#loginwindow-content { 
 
    display: table; 
 
    table-layout: fixed; 
 
    width: 100%; 
 
    height: 100%; 
 
    border: 1px solid #c2c2c2; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 

 
.loginwindow-row { 
 
    text-align: center; 
 
    display: table-row; 
 
    background: pink; 
 
} 
 

 
.loginbutton { 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    border-top: 1px solid green; 
 
} 
 

 
.logininput { 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    border-top: 1px solid green; 
 
}

<div id="loginwindow" class="nowrap"> 
 
    <button type="button" id="closeloginwindow" onclick="closeloginwindow(); enableScroll();"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button> 
 
    <form method="post" onsubmit="closeloginwindow();"> 
 
     <ul id="loginwindow-content"> 
 
     <li class="loginwindow-row"> 
 
      <input class="logininput" type="text" placeholder="Name" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Name'" required> 
 
     </li> 
 
     <li class="loginwindow-row"> 
 
      <input class="logininput" type="password" placeholder="Password" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Password'" required> 
 
     </li> 
 
     <li class="loginwindow-row"> 
 
      <input type="submit" id="loginbuttonsubmit" class="loginbutton" value="Login"> 
 
      <input type="button" id="loginbuttoncancel" class="loginbutton" value="Cancel" onclick="closeloginwindow(); enableScroll();"> 
 
     </li> 
 
     </ul> 
 
    </form> 
 
    </div>

我試圖做一個簡單的組合網站。該網站應該有一個登錄屏幕，在其他人面前顯示。在這個登錄掩碼裏面，我想做3行內容（用戶名，密碼，按鈕）。爲了均勻地傳播它們，我想列出這樣的列表：How to spread dynamic divs vertically, evenly?

但是，我無法將列表的高度設置爲100％sice我已將登錄窗口的高度設置爲30％。設置一個百分比是不可能的，就像這裏提到的那樣： CSS can't seem to set height to 100% of parent container

由於高度無法設置，div不能均勻分佈。我的問題是：我怎樣才能設置列表的高度，以便它佔據整個窗口？

編輯：或者是否有任何其他方式來傳播他們eavenly。我做了一些研究，我發現的唯一可能的事情就是上面提到的那個。

我希望我正確地問了這個問題。我在這裏很新。

Answer 1

看起來您需要將樣式應用於表單，因爲它是您嘗試調整大小的ul的父級。下面是我爲了讓它按我想要的方式工作而做出的CSS更改。

我刪除了float:center;，因爲據我所知它不存在。

根據您的target audience，您還可以查看css flex-boxes的元素分佈。

#loginwindow { 
 
    position: fixed; 
 
    display: block; 
 
    z-index: 3; 
 
    top: 50%; 
 
    left: 50%; 
 
    /*visibility: hidden;*/ 
 
    width: 30%; 
 
    height: 30%; 
 
    margin: -15% 0 0 -15%; 
 
    text-align: center; 
 
    /*opacity: 0;*/ 
 
    border: 1px solid black; 
 
    background-color: white; 
 
} 
 

 
#loginform{ /* Set height of form to 100% */ 
 
    height:100%; 
 
} 
 

 
#loginwindow-content { 
 
display: table; 
 
table-layout: fixed; 
 
width: 100%; 
 
height: 100%; /* Height set to 100% so we don't overflow */ 
 
border: 1px solid #c2c2c2; 
 
-moz-box-sizing: border-box; 
 
box-sizing: border-box; 
 
    margin:0; 
 
    padding:0; 
 
} 
 

 
.loginwindow-row { 
 
    text-align: center; 
 
    display: table-row; 
 
    background: pink; 
 
} 
 

 
.loginbutton { 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    border-top: 1px solid green; 
 
} 
 

 
.logininput { 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    border-top: 1px solid green; 
 
} 
 

 
#closeloginwindow{ /*Added to move the close button out of the way*/ 
 
    position:absolute; 
 
    left:0; 
 
    top:0; 
 
    z-index:1; 
 
}

<div id="loginwindow" class="nowrap"> 
 
    <button type="button" id="closeloginwindow" onclick="closeloginwindow(); enableScroll();"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button> 
 
    <form id="loginform" method="post" onsubmit="closeloginwindow();"> 
 
     <ul id="loginwindow-content"> 
 
     <li class="loginwindow-row"> 
 
      <input class="logininput" type="text" placeholder="Name" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Name'" required> 
 
     </li> 
 
     <li class="loginwindow-row"> 
 
      <input class="logininput" type="password" placeholder="Password" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Password'" required> 
 
     </li> 
 
     <li class="loginwindow-row"> 
 
      <input type="submit" id="loginbuttonsubmit" class="loginbutton" value="Login"> 
 
      <input type="button" id="loginbuttoncancel" class="loginbutton" value="Cancel" onclick="closeloginwindow(); enableScroll();"> 
 
     </li> 
 
     </ul> 
 
    </form> 
 
    </div>