时间戳

首页 > 解决方案 > 如何放大页面并获取滚动框？

html - 如何放大页面并获取滚动框？

问题描述

我是新手，我正在创建一个网页。每当我放大时，页面不会显示滚动按钮，当它达到 >= 300% 时，字母分成 2 行（图 1）。如何使页面像图 2 那样静态工作，当缩小到小于 100% 时，宽度仍然是 100%？

图1： 在此处输入图像描述

图2： 在此处输入图像描述

#Header {
  background-color: #1abbcc;
  color: white;
  text-align: center;
  position: absolute;
  width: 100%;
  height: 50px;
  font-size: 32px;
}

body {
  margin: 0;
  font-family: Tahoma;
  width: 100%;
}

span {
  left: 0%;
  width: 100%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
<div id="Header">
  <span>
    CSP Online Practice Environment
  </span>
</div>

标签： htmlcss

解决方案

这里有一些技巧可以解决您的问题：

1）我们可以通过删除绝对位置来改进样式，您可以在不设置绝对位置的情况下确定您的位置，绝对位置相对于最近的定位祖先（而不是相对于视口定位，如固定）。

2）如果我们需要使用absolute，我们可以通过使用媒体查询来修复它，也可以@media only screen and (width : 1024px) { /* Your Styles */ }查看这个答案以获取更多关于不同缩放的媒体查询的详细信息

<!DOCTYPE html>
     <html>
        <head>
            <meta charset = "utf-8" />
            <title> CSP COPE </title>
            <style>
              #Header
              {
                  background-color : #1abbcc;
                  color: white;
                  text-align: center;
                  width: 100%;
                  font-size: 32px;
              }

              body
              {
                  margin: 0;
                  font-family: Tahoma;
                  width: 100%;
              }

              span
              {
                  width: 100%;
                  transform: translateY(-50%);
              }
            </style>
        </head>
 
        <body>
            <div id="Header">
                <span>
                    CSP Online Practice Environment
                </span>
           </div>
        </body>
    </html>

推荐阅读