Question

＆＃13;

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;
}

＆＃13;

  <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>

＆＃13;

我正在努力创建一个简单的投资组合网站。该网站应该有一个登录掩码，在其他任何人面前都会出现。在这个登录掩码内，我想制作3行内容（用户名，密码，按钮）。为了均匀地传播它们，我想制作一个如下所述的列表：How to spread dynamic divs vertically, evenly?

但是，我无法将列表的高度设置为100％sice我已将登录窗口的高度设置为30％。设置百分比的百分比是不可能的，如下所述： CSS can't seem to set height to 100% of parent container

由于无法设置高度，所以div不会均匀分布。我的问题是：如何设置列表的高度，以便占用整个窗口？

编辑：或者还有其他任何方式可以传播它们。我做了一些研究，我发现的唯一可能是上面提到的那个。

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

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>

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

1 个答案: