是否可以让网站内容覆盖整个页面而无需通过CSS滚动？

Question

如标题中所述，是否可以让实际的表格和按钮完全适合每个屏幕分辨率而无需在垂直方向上滚动？当我使用手机时，表格会结束，需要滚动，而当使用我的电脑w / 1920x1080 res时，它只覆盖了一半的页面 注意：

• 使用Bootstrap
• 水平缩放，垂直缩放。
• 网站布局正确，页眉和页脚是单独的文件，但会插入到索引中。

感谢。

代码：

＆＃13;

＆＃13;

/* `Widths
----------------------------------------------------------------------------------------------------*/

.input_tiny {
  width: 50px;
}

.input_small {
  width: 100px;
}

.input_medium {
  width: 150px;
}

.input_large {
  width: 200px;
}

.input_xlarge {
  width: 250px;
}

.input_xxlarge {
  width: 300px;
}

.input_full {
  width: 100%;
}

/*
  Added via JS to <textarea> and class="input_full".
  Applies only to IE7. Other browsers don't need it.
*/
.input_full_wrap {
  display: block;
  padding-right: 8px;
}

/* `UI Consistency
----------------------------------------------------------------------------------------------------*/

::-moz-focus-inner {
  border: 0;
}

input[type="search"]::-webkit-search-decoration {
  display: none;
}

input,
button,
select,
textarea {
  -moz-background-clip: padding;
  -webkit-background-clip: padding;
  background-clip: padding-box;
  margin: 0;
  vertical-align: middle;
  
}

button,
input[type="reset"],
input[type="submit"],
input[type="button"] {
    width:40%;
    height:80px;
    background-color: #666;
    color: #FFF; 
    border: 1px solid #fff;
    font-weight: bold;
    font-size: 2.1em;
    padding: 15px;
    cursor:pointer;
    text-align: center;
  /* IE7 */
  *padding-top: 2px;
  *padding-bottom: 0px;
}

button {
  /* IE7 */
  *padding-top: 1px;
  *padding-bottom: 1px;
}

button[disabled],
input[type="reset"][disabled],
input[type="submit"][disabled],
input[type="button"][disabled] {
  color: #888;
}

textarea,
select,
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="email"],
input[type="month"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="time"],
input[type="url"],
input[type="week"] {
width:90%;
    height:70px;
    padding:5px;
    border: 2px solid #FFF;
    background-color: #666;
    color: #FFF;
    font-weight: bold;
    font-size:2.2em;
    text-align: center;

    -webkit-border-radius: 0px;
    -khtml-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;

  /* IE7 */
  *padding-top: 2px;
  *padding-bottom: 1px;
  *height: auto;
}

/*
  Separate rule for Firefox.
  Cannot stack with WebKit's.
*/
input.placeholder_text,
textarea.placeholder_text,
input:-moz-placeholder,
textarea:-moz-placeholder {
  color: #888;
}

::-webkit-input-placeholder {
  color: #888;
}

textarea[disabled],
select[disabled],
input[type="date"][disabled],
input[type="datetime"][disabled],
input[type="datetime-local"][disabled],
input[type="email"][disabled],
input[type="month"][disabled],
input[type="number"][disabled],
input[type="password"][disabled],
input[type="search"][disabled],
input[type="tel"][disabled],
input[type="text"][disabled],
input[type="time"][disabled],
input[type="url"][disabled],
input[type="week"][disabled] {
  background-color: #eee;
  color: #888;
}

button:focus,
button:active,
input:focus,
input:active,
select:focus,
select:active,
textarea:focus,
textarea:active {
  -moz-box-shadow: #709a7c 0 0 7px;
  -webkit-box-shadow: #709a7c 0 0 7px;
  box-shadow: #709a7c 0 0 7px;

  /* for Opera */
  z-index: 1;
}

input[type="file"]:focus,
input[type="file"]:active,
input[type="radio"]:focus,
input[type="radio"]:active,
input[type="checkbox"]:focus,
input[type="checkbox"]:active {
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.is_webkit select {
  /* Tweaks for Safari + Chrome. */
  background-image: url(../img/select_arrow.gif);
  background-repeat: no-repeat;
  background-position: right center;
  padding-right: 20px;
}

textarea,
select[multiple] {
  height: auto;
}

select[multiple],
.is_webkit select[multiple] {
  background-image: none;
  padding: 0;
}

textarea {
  min-height: 40px;
  overflow: auto;
  resize: vertical;
  width: 100%;
}

optgroup {
  color: #000;
  font-style: normal;
  font-weight: normal;
}

＆＃13;

＆＃13;

＆＃13;

Answer 1

你想用div或其他东西填充所有页面吗？如果是这样，请执行以下操作：

＆＃13;

＆＃13;

function changeColor() {
    var checkBoxList = document.getElementById("myCheckBoxList");
    var options = checkBoxList.getElementsByTagName('input');

    for (var i = 0; i < options.length; i++) {
        console.log(options[i].checked);
        if (options[i].checked) {
            options[i].parentElement.className = 'Red';
        }
    }
}

＆＃13;

body {
  margin: 0;
 }
body>div {
  background: #F00;
  height: 100vh;
}

＆＃13;

＆＃13;

＆＃13;