CSS适合/位置问题（无论显示器大小如何，都适合页面显示）

时间：2019-02-26 14:39:37

标签： html css

我正在为学校创建一个交互式响铃时间表，并且我尝试并尝试探索position，float，left/right，margin，等等，我无法弄清楚如何使表格（时间表的总览）合适，使其始终适合页面，并且不会从侧面溢出。我正在尝试使其尽可能地易于使用，而不要求老师知道如何缩小浏览器以查看所有内容。有时它会适合，例如在我的Chromebook操作系统上就可以了。但是在我的Windows桌面上，它将显得有点太大。我并不想弄乱太多的精确定位值，那么最简单的方法是什么？

我尝试过的事情

*将HTML文件中的bell1和bell2 div的位置更改为container div之外，body div之外的位置，并将其保留在原位置

*摆脱float或position或两者，或将其更改为position: relative;，并使用各种值进行相同的故障排除

*强制百分比刻度（例如50％）

预览

current preview

代码段

//Not sure it's necessary to add the javascript, since it has no HTML DOM regarding style (it only involves the time and clock settings), but I'll add an excerpt just incase
function clock() {
  /*global hr*/
  /*global min*/
  var time = new Date();
  // hr is set to be 24 hours, aka 1 pm becomes 13
  var hr = time.getHours();
  var min = time.getMinutes();

  var ampm = " PM";
  if (hr < 12) {
    ampm = " AM";
  }
  // since hr is 24 hour time, we make it 12 hour time by subtracting 12 from it if its above twelve
  if (hr > 12) {
    hr -= 12;
  }
  if (hr < 10) {
    hr = "" + hr;
  }
  // if the minute value is under 10, add a 0 before it so it shows as 2:05 instead of 2:5
  if (min < 10) {
    min = "0" + min;
  }
  // set the text of the "Current Time" to the current time
  document.getElementById("timetext").value = hr + ":" + min + ampm;
  // refresh this function every 1 second, or 1000 milliseconds, to update time
  setTimeout("clock()", 1000);

}

function setPeriod() {
  //set elements from webpage as variables
  var current = document.getElementById("timetext");
  var period = document.getElementById("periodtext");
  var per1 = document.getElementById("p1");
  var per2 = document.getElementById("p2");
  var per3 = document.getElementById("p3");
  var per4 = document.getElementById("p4");
  var per5 = document.getElementById("p5");
  var adv = document.getElementById("adv");
  var per6 = document.getElementById("p6");
  var per7 = document.getElementById("p7");
  var thur = document.getElementById("thur");
  var revis = document.getElementById("revis");
  // add a listener to the thursday button if it is checked/unchecked
  thur.addEventListener("click", function() {
    // if thursday is checked after being clicked
    if (thur.checked == true && revis.checked == false) {
      // disable the advisory button
      adv.disabled = true;
      // if the period 1 button is checked...
      if (per1.checked == true) {
        // ... set the text to the time period 1 starts and ends on a thursday
        period.value = "8:50 AM - 9:33 AM";
      }
      // repeat the process for the other periods
      else if (per2.checked == true) {
        period.value = "9:38 AM - 10:21 AM";
      } else if (per3.checked == true) {
        period.value = "10:26 AM - 11:09 AM";
      } else if (per4.checked == true) {
        period.value = "11:09 AM - 12:36 PM";
      } else if (per5.checked == true) {
        period.value = "12:41 PM - 1:24 PM";
      } else if (adv.checked == true) {
        alert("Period Selection is reset due to Thursday-mode being enabled whilst Advisory is selected");
        adv.checked = false;
        period.value = "Select Period";
      } else if (per6.checked == true) {
        period.value = "1:28 PM - 2:12 PM";
      } else if (per7.checked == true) {
        period.value = "2:17 PM - 3:00 PM";
      } else {
        console.log("User tried enabling Thursday mode with no period selected!");
      }
    }
  });
}
html,
body {
  margin: 0;
  padding: 0;
}

#container {
  width: 50%;
  position: absolute;
  left: 25%;
}

.textHeader {
  text-align: center;
  font-size: 200%;
  font-family: impact;
  text-shadow: #f00 1px 1px;
}

table {
  background: white;
  padding: 0;
  margin-top: 50px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  border-spacing: 0px;
  border: solid 2px #000;
}

img {
  -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  position: absolute;
  width: 100%;
  z-index: -100;
}

#credits {
  text-align: center;
}

#bell1 {
  display: inline-table;
  position: absolute;
  float: left;
  margin-right: 100%;
  width: 350px;
  left: -375px;
}

#bell2 {
  display: inline-table;
  position: absolute;
  float: right;
  margin-left: 100%;
  width: 350px;
  right: -375px;
}

#norm,
#norm2 {
  position: relative;
  text-align: center;
  margin-top: 50px;
  margin-bottom: 0;
  font-size: 200%;
  padding: 0px;
}

tr {
  margin: 0;
  padding: 0;
}

.lunch {
  background-color: silver;
}

td,
th {
  border: solid 1px #000;
  text-align: center;
}

tr,
td,
th {
  font-size: 115%;
}

.textLabel {
  font-size: 150%;
  font-family: impact;
  text-align: center;
}

.textImp,
.textSub {
  font-size: 110%;
  font-family: arial;
  text-align: center;
}

.textImp {
  color: black;
  text-shadow: rgb(255, 0, 0) 1px 1px;
  font-style: bold;
}

.text {
  background-color: black;
  width: 100%;
  color: white;
  text-align: center;
  font-size: 250%;
  font-family: courier;
  margin: 0;
  font-weight: bolder;
  text-shadow: 2px 2px #f00;
}

c #periodButtons {
  margin-top: 25px;
  font-size: 125%;
}

#currentPeriod,
#currentLunch,
#currentTime {
  margin: 0;
  margin-bottom: 5px;
  padding: 0;
  width: 100%;
  background: black;
  border: solid 1px red;
}
<html>

<head>
  <title>City High Bell Schedule</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <link rel="stylesheet" type="text/css" href="city_high_bell_schedule.css">
  <link rel="shortcut icon" href="favicon.ico">
  <link rel="icon" type="image/gif" href="animated_favicon1.gif">
  <script src="city_high_bell_schedule.js"></script>
</head>

<body onload="clock();">
  <div id="container">
    <div id="body">
      <div id="bell1">
        <h2 id="norm" class="textImp">Normal</h2>
        <table>
          <tr>
            <th>Period</th>
            <th>MTWF</th>
            <th>TH</th>
          </tr>
          <tr>
            <td>Period 1</td>
            <td>8:50-9:39</td>
            <td>8:50-9:33</td>
          </tr>
          <tr>
            <td>Period 2</td>
            <td>9:44-10:33</td>
            <td>9:38-10:21</td>
          </tr>
          <tr>
            <td>Period 3</td>
            <td>10:38-11:27</td>
            <td>10:26-11:09</td>
          </tr>
          <tr>
            <td>Period 4</td>
            <td>11:27-12:52</td>
            <td>N/A</td>
          </tr>
          <tr class="lunch">
            <td>A LUNCH<br>CLASS</td>
            <td>11:27-11:55<br>12:00-12:52</td>
            <td>11:09-11:39<br>11:44-12:36</td>
          </tr>
          <tr class="lunch">
            <td>CLASS<br>B LUNCH<br>CLASS</td>
            <td>11:32-11:55<br>11:55-12:23<br>12:25-12:52</td>
            <td>11:14-11:39<br>11:39-12:07<br>12:11-12:36</td>
          </tr>
          <tr class="lunch">
            <td>CLASS<br>C LUNCH</td>
            <td>11:32-12:24<br>12:24-12:52</td>
            <td>11:14-12:05<br>12:07-12:36</td>
          </tr>
          <tr>
            <td>Period 5</td>
            <td>12:57-1:46</td>
            <td>12:41-1:24</td>
          </tr>
          <tr>
            <td>Advisory</td>
            <td>1:46-2:12</td>
            <td>N/A</td>
          </tr>
          <tr>
            <td>Period 6</td>
            <td>2:17-3:06</td>
            <td>1:28-2:12</td>
          </tr>
          <tr>
            <td>Period 7</td>
            <td>3:11-4:00</td>
            <td>2:17-3:00</td>
          </tr>
        </table>
      </div>
      <div id="bell2">
        <h2 id="norm2" class="textImp">Revised</h2>
        <table>
          <tr>
            <th>Period</th>
            <th>MTWF</th>
            <th>TH</th>
          </tr>
          <tr>
            <td>Period 1</td>
            <td>8:45-9:37</td>
            <td>8:45-9:31</td>
          </tr>
          <tr>
            <td>Period 2</td>
            <td>9:42-10:32</td>
            <td>9:36-10:20</td>
          </tr>
          <tr>
            <td>Period 3</td>
            <td>10:37-11:27</td>
            <td>10:25-11:09</td>
          </tr>
          <tr>
            <td>Period 4</td>
            <td>11:27-12:52</td>
            <td>N/A</td>
          </tr>
          <tr class="lunch">
            <td>A LUNCH<br>CLASS</td>
            <td>11:27-11:55<br>12:00-12:52</td>
            <td>11:09-11:39<br>11:44-12:36</td>
          </tr>
          <tr class="lunch">
            <td>CLASS<br>B LUNCH<br>CLASS</td>
            <td>11:32-11:55<br>11:55-12:23<br>12:25-12:52</td>
            <td>11:14-11:39<br>11:39-12:07<br>12:11-12:36</td>
          </tr>
          <tr class="lunch">
            <td>CLASS<br>C LUNCH</td>
            <td>11:32-12:24<br>12:24-12:52</td>
            <td>11:14-12:05<br>12:07-12:36</td>
          </tr>
          <tr>
            <td>Period 5</td>
            <td>12:57-1:48</td>
            <td>12:41-1:27</td>
          </tr>
          <tr>
            <td>Advisory</td>
            <td>1:48-2:15</td>
            <td>N/A</td>
          </tr>
          <tr>
            <td>Period 6</td>
            <td>2:20-3:10</td>
            <td>1:32-2:16</td>
          </tr>
          <tr>
            <td>Period 7</td>
            <td>3:15-4:05</td>
            <td>2:21-3:05</td>
          </tr>
        </table>
      </div>
    </div>
    <h4 class="textHeader">City High Bell Schedule</h4>
    <p class="textSub">This is a timer/clock that automatically updates what the current period is, what time the period begins and ends, plus an overview of the schedule itself. It is meant to be put on a smartboard during work time, reading time, whatever it may be. So
      students can stop asking, "What time does this period end?"<br></p>
    <p class="textImp">THE TEACHER DISMISSES THE CLASS, NOT THE BELL OR THIS REFERENCE.</p>
    <p class="textSub" style="text-align: center;"><b>Instructions:</b> Select the current period, and this page *should* do the rest for you.</p>
    <div id="schedule">
      <p class="textLabel">Current Time</p>
      <div id="currentTime">
        <input type="button" value="Loading..." id="timetext" class="text" />
      </div>
      <p class="textLabel">Current Period</p>
      <div id="currentPeriod">
        <input type="button" value="Select Period" id="periodtext" class="text" />
      </div>
      <div id="periodButtons" style="text-align: center;">
        <input id="p1" type="radio" name="per" />Period 1
        <input id="p2" type="radio" name="per" />Period 2
        <input id="p3" type="radio" name="per" />Period 3
        <input id="p4" type="radio" name="per" />Period 4
        <input id="p5" type="radio" name="per" />Period 5
        <input id="adv" type="radio" name="per" />Advisory
        <input id="p6" type="radio" name="per" />Period 6
        <input id="p7" type="radio" name="per" />Period 7
        <br>
        <input id="thur" type="checkbox" />Thursday
        <input id="revis" type="checkbox" checked="true" />Revised Schedule (2018/2019)
      </div>
      <hr>
      <div id="footer">
        <p id="credits">
          Made by Josh Brenneman
        </p>
      </div>
    </div>
  </div>
</body>

</html>

重新注册

在CSS中，无论显示器大小如何，如何做到这一点，如果网页处于100％缩放（也称为默认缩放）的状态，如何使表格（bell1/bell2）始终适合，因此没有滚动条，表格将各边对齐？

1 个答案:

答案 0 :(得分：2)

删除浮动和绝对定位的元素。我建议您在元素对齐时使用flex。当元素没有相对位置的父对象时，请勿使用绝对位置。检查代码

#container {
    display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox;      /* TWEENER - IE 10 */
    display: -webkit-flex;     /* NEW - Chrome */
    display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
    flex-wrap: nowrap;
    flex-direction: row;
    align-items: flex-start;
    width: 100%;
}

#container .column {
    flex: 1 1 auto;
    padding-left: 15px;
    padding-right: 15px;
}

#container .column.table{
    width: 70%;
}

.textHeader {
    text-align: center;
    font-size: 200%;
    font-family: impact;
    text-shadow: #f00 1px 1px;
}


table {
    background: white;
    padding: 0;
    margin-top: 50px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    border-spacing: 0px;
    border: solid 2px #000;
}
img {
    -webkit-mask-image:-webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0.5)), to(rgba(0,0,0,0)));
    mask-image: linear-gradient(to bottom, rgba(0,0,0,0.5), rgba(0,0,0,0));
    position: absolute;
    width: 100%;
    z-index: -100;
}
#credits {
    text-align: center;
}

#bell1 {
    display: inline-table;

}
#bell2 {
    display: inline-table;

}
#norm, #norm2 {
    position: relative;
    text-align: center;
    margin-top: 50px;
    margin-bottom: 0;
    font-size: 200%;
    padding: 0px;
}
tr {
    margin: 0;
    padding: 0;
}

.lunch {
    background-color: silver;
}

td,
th {
    border: solid 1px #000;
    text-align: center;
}

tr,
td,
th {
    font-size: 115%;
}

.textLabel {
    font-size: 150%;
    font-family: impact;
    text-align: center;
}

.textImp,
.textSub {
    font-size: 110%;
    font-family: arial;
    text-align: center;
}

.textImp {
    color: black;
    text-shadow: rgb(255, 0, 0) 1px 1px;
    font-style: bold;
}

.text {
    background-color: black;
    width: 100%;
    color: white;
    text-align: center;
    font-size: 250%;
    font-family: courier;
    margin: 0;
    font-weight: bolder;
    text-shadow: 2px 2px #f00;
}
c
#periodButtons {
    margin-top: 25px;
    font-size: 125%;
}

#currentPeriod,
#currentLunch,
#currentTime {
    margin: 0;
    margin-bottom: 5px;
    padding: 0;
    width: 100%;
    background: black;
    border: solid 1px red;
}
<html>

<head>
    <title>City High Bell Schedule</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="city_high_bell_schedule.css">
    <link rel="shortcut icon" href="favicon.ico">
    <link rel="icon" type="image/gif" href="animated_favicon1.gif">
    <script src="city_high_bell_schedule.js"></script>
</head>

<body>
    <div id="container">
            <div class="column table">
              <h2 id="norm" class="textImp">Normal</h2>
                <table>
                    <tr>
                        <th>Period</th>
                        <th>MTWF</th>
                        <th>TH</th>
                    </tr>
                    <tr>
                        <td>Period 1</td>
                        <td>8:50-9:39</td>
                        <td>8:50-9:33</td>
                    </tr>
                    <tr>
                        <td>Period 2</td>
                        <td>9:44-10:33</td>
                        <td>9:38-10:21</td>
                    </tr>
                    <tr>
                        <td>Period 3</td>
                        <td>10:38-11:27</td>
                        <td>10:26-11:09</td>
                    </tr>
                    <tr>
                        <td>Period 4</td>
                        <td>11:27-12:52</td>
                        <td>N/A</td>
                    </tr>
                    <tr class="lunch">
                        <td>A LUNCH<br>CLASS</td>
                        <td>11:27-11:55<br>12:00-12:52</td>
                        <td>11:09-11:39<br>11:44-12:36</td>
                    </tr>
                    <tr class="lunch">
                        <td>CLASS<br>B LUNCH<br>CLASS</td>
                        <td>11:32-11:55<br>11:55-12:23<br>12:25-12:52</td>
                        <td>11:14-11:39<br>11:39-12:07<br>12:11-12:36</td>
                    </tr>
                    <tr class="lunch">
                        <td>CLASS<br>C LUNCH</td>
                        <td>11:32-12:24<br>12:24-12:52</td>
                        <td>11:14-12:05<br>12:07-12:36</td>
                    </tr>
                    <tr>
                        <td>Period 5</td>
                        <td>12:57-1:46</td>
                        <td>12:41-1:24</td>
                    </tr>
                    <tr>
                        <td>Advisory</td>
                        <td>1:46-2:12</td>
                        <td>N/A</td>
                    </tr>
                    <tr>
                        <td>Period 6</td>
                        <td>2:17-3:06</td>
                        <td>1:28-2:12</td>
                    </tr>
                    <tr>
                        <td>Period 7</td>
                        <td>3:11-4:00</td>
                        <td>2:17-3:00</td>
                    </tr>
                </table>
            </div>
        <div class="column">
	        <h4 class="textHeader">City High Bell Schedule</h4>
	        <p class="textSub">This is a timer/clock that automatically updates what the current period is, what time the period begins and ends, plus an overview of the schedule itself. It is meant to be put on a smartboard during work time,
	            reading time, whatever it may be. So students can stop asking, "What time does this period end?"<br></p>
	        <p class="textImp">THE TEACHER DISMISSES THE CLASS, NOT THE BELL OR THIS REFERENCE.</p>
	        <p class="textSub" style="text-align: center;"><b>Instructions:</b> Select the current period, and this page *should* do the rest for you.</p>

          <p class="textLabel">Current Time</p>
            <div id="currentTime">
                <input type="button" value="Loading..." id="timetext" class="text" />
            </div>
            <p class="textLabel">Current Period</p>
            <div id="currentPeriod">
                <input type="button" value="Select Period" id="periodtext" class="text" />
            </div>
            <div id="periodButtons" style="text-align: center;">
                <input id="p1" type="radio" name="per" />Period 1
                <input id="p2" type="radio" name="per" />Period 2
                <input id="p3" type="radio" name="per" />Period 3
                <input id="p4" type="radio" name="per" />Period 4
                <input id="p5" type="radio" name="per" />Period 5
                <input id="adv" type="radio" name="per" />Advisory
                <input id="p6" type="radio" name="per" />Period 6
                <input id="p7" type="radio" name="per" />Period 7
                <br>
                <input id="thur" type="checkbox" />Thursday
                <input id="revis" type="checkbox" checked="true"/>Revised Schedule (2018/2019)
            </div>
            <hr>
            <div id="footer">
                <p id="credits">
                    Made by Josh Brenneman
                </p>
            </div>
       	</div>
             <div class="column table">
            <h2 id="norm2" class="textImp">Revised</h2>
                <table>
                    <tr>
                        <th>Period</th>
                        <th>MTWF</th>
                        <th>TH</th>
                    </tr>
                    <tr>
                        <td>Period 1</td>
                        <td>8:45-9:37</td>
                        <td>8:45-9:31</td>
                    </tr>
                    <tr>
                        <td>Period 2</td>
                        <td>9:42-10:32</td>
                        <td>9:36-10:20</td>
                    </tr>
                    <tr>
                        <td>Period 3</td>
                        <td>10:37-11:27</td>
                        <td>10:25-11:09</td>
                    </tr>
                    <tr>
                        <td>Period 4</td>
                        <td>11:27-12:52</td>
                        <td>N/A</td>
                    </tr>
                    <tr class="lunch">
                        <td>A LUNCH<br>CLASS</td>
                        <td>11:27-11:55<br>12:00-12:52</td>
                        <td>11:09-11:39<br>11:44-12:36</td>
                    </tr>
                    <tr class="lunch">
                        <td>CLASS<br>B LUNCH<br>CLASS</td>
                        <td>11:32-11:55<br>11:55-12:23<br>12:25-12:52</td>
                        <td>11:14-11:39<br>11:39-12:07<br>12:11-12:36</td>
                    </tr>
                    <tr class="lunch">
                        <td>CLASS<br>C LUNCH</td>
                        <td>11:32-12:24<br>12:24-12:52</td>
                        <td>11:14-12:05<br>12:07-12:36</td>
                    </tr>
                    <tr>
                        <td>Period 5</td>
                        <td>12:57-1:48</td>
                        <td>12:41-1:27</td>
                    </tr>
                    <tr>
                        <td>Advisory</td>
                        <td>1:48-2:15</td>
                        <td>N/A</td>
                    </tr>
                    <tr>
                        <td>Period 6</td>
                        <td>2:20-3:10</td>
                        <td>1:32-2:16</td>
                    </tr>
                    <tr>
                        <td>Period 7</td>
                        <td>3:15-4:05</td>
                        <td>2:21-3:05</td>
                    </tr>
                </table>
            </div>
    </div>
</body>

在您的自适应CSS代码中。如果要将每个元素的宽度设置为100％，只需将flex-direction值设置为“ column”。

相关问题
最新问题