将高度设置为高度30％的parrent高度的100％？

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。我做了一些研究，我发现的唯一可能的事情就是上面提到的那个。

我希望我正确地问了这个问题。我在这里很新。

来源

2017-08-10 Bolphgolph

你能提供你的代码的工作示例？我无法在codepen上重现它。 SO为您提供了一个显示HTML/CSS结果的工具。 – Carele

我已经添加了一个示例。它不适合你，因为我忘了删除不透明和可见性标签。它看起来不太好，但我希望你能明白我的意思。你将不得不使它充满页面才能看到 – Bolphgolph

不要将高度设置为继承获得父项的100％？ – user5014677

看起来您需要将样式应用于表单，因为它是您尝试调整大小的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>

来源

2017-08-10 10:13:53

将高度设置为高度30％的parrent高度的100％？

回答

相关问题