javascript - 无需滚动即可在所有平台上将所有元素放入视口(viewport)中-6ren

javascript - 无需滚动即可在所有平台上将所有元素放入视口(viewport)中

转载作者：行者123 更新时间：2023-11-28 00:45:19

我的目标是让页面的所有内容都适合所有平台(移动/桌面)屏幕上的视口(viewport)。

内容包括 .main-carousel，这是一个图像 slider 。 .overlay 是页面上的主要叠加层

这是页面外观的示意图。 pagelayout

目前，有一个滚动条出现，页面上的购买按钮出现在视口(viewport)下方。我在这里使用 13"笔记本电脑。如何让它在所有浏览器上响应？这是供您引用的代码片段。

function openNav() {
  document.getElementById("myNav").style.left = "50%";
}

function closeNav() {
  document.getElementById("myNav").style.left = "100%";
}

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

.flickity-page-dots {
  display: none;
}

.main-carousel {
  margin-top: 20px;
}

.carousel-cell img {
  max-width: 35%;
  /* full width */
  height: auto;
}

.carousel-cell {
  width: 100%;
  /* full width */
  background: #FFFFFF;
  /* center images in cells with flexbox */
  display: flex;
  align-items: center;
  justify-content: center;
}

.flickity-enabled:focus .flickity-viewport {
  outline: thin dotted;
  outline: 5px auto -webkit-focus-ring-color;
}

.flickity-button {
  background: transparent;
}

.overlay {
  height: 100%;
  width: 50%;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 100%;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.5);
  overflow-x: hidden;
  transition: 0.5s;
}

.overlay-content {
  float: right;
  position: relative;
  top: 15%;
  width: 50%;
}

.overlay a {
  padding: 8px;
  text-decoration: none;
  font-size: 36px;
  color: #f1f1f1;
  display: block;
  transition: 0.3s;
}

.overlay a:hover,
.overlay a:focus {
  color: #f1f1f1;
}

.overlay .closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 60px;
}

@media screen and (max-height: 450px) {
  .overlay a {
    font-size: 20px
  }
  .overlay .closebtn {
    font-size: 40px;
    top: 15px;
    right: 35px;
  }
}


/*#text{
	position: absolute;
    top: 50%;
    left: 50%;
    font-size: 20px;
    color: white;
    transform: translate(-50%,-50%);
    ms-transform: translate(-50%,-50%);
}*/

.text-block {}

.text-block p {
  color: white;
}

h1 {
  color: white;
}

.button {
  background-color: #ddd;
  border: none;
  color: black;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 16px;
}

#button {
  text-align: center;
  margin-top: 30px;
}

#button a {
  background: #999;
  padding: 1em 2.4em;
  font-size: .9em;
  margin: 1em;
  color: white;
  text-decoration: none;
  text-align: center;
}

#logo .logo-image img {
  max-width: 100%;
  max-height: 30px;
}

<link href="https://unpkg.com/flickity@2/dist/flickity.min.css" rel="stylesheet" />
<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>

<htmL>

<head>

  <div id="logo">
    <div class="logo logo-image">
      <img src="https://static1.squarespace.com/static/5b87a2662714e5f90127b5d6/t/5c01ecc388251b9d3ce78f00/1543630386191/?format=1500w" alt="Studio Otto Berlin">
    </div>
  </div>
</head>

<body>

  <span style="float:right;" onclick="openNav()">&#8641;open</span>
  <div id="myNav" class="overlay">
    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
    <div class="overlay-content">
      <div class="text-block">
        <h1>"Fever" T-shirt</h1>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
          It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
          desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
      </div>
      <button class="button">Purchase</button>
    </div>
  </div>
  <div class="main-carousel" data-flickity='{ "cellAlign": "left","contain": true,"wrapAround":true }'>
    <div class="carousel-cell"><img src="https://static1.squarespace.com/static/5b87a2662714e5f90127b5d6/5beb5695032be4bf05089f8c/5beb8113cd83669970bfab29/1542161236370/studio-otto-rave-skateboards-editorial-003-compressor.jpg"></div>
    <div class="carousel-cell"><img src="https://static1.squarespace.com/static/5b87a2662714e5f90127b5d6/5beb5695032be4bf05089f8c/5beb8113cd83669970bfab29/1542161236370/studio-otto-rave-skateboards-editorial-003-compressor.jpg"></div>
    <div class="carousel-cell"><img src="https://static1.squarespace.com/static/5b87a2662714e5f90127b5d6/5beb5695032be4bf05089f8c/5beb8113cd83669970bfab29/1542161236370/studio-otto-rave-skateboards-editorial-003-compressor.jpg"></div>
    <div class="carousel-cell"><img src="https://static1.squarespace.com/static/5b87a2662714e5f90127b5d6/5beb5695032be4bf05089f8c/5beb8113cd83669970bfab29/1542161236370/studio-otto-rave-skateboards-editorial-003-compressor.jpg"></div>

  </div>
  <div id="button"><a href="#">Button 1</a></div>

</body>

</htmL>

当我使用谷歌开发者工具调整页面大小时，按钮下方有很多空白区域。 White_space

如何使页面响应，以便所有内容都适合视口(viewport)？非常感谢您的帮助。

最佳答案

查看 grid 布局的 CSS 文档。您可以使用它来定义应用程序主布局。然后，您可以使用 flex 元素 (display: flex) 定义各个小部件区域。另一件需要熟悉的事情是媒体查询，您可以明确地告诉元素在不同的分辨率下应该如何表现。哦，还要检查单位类型 vh 和 vw 而不是使用像素。我希望这些能让您了解如何了解更多信息。

关于javascript - 无需滚动即可在所有平台上将所有元素放入视口(viewport)中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53567648/

文章推荐： html - 最大宽度下的 Tab UI 溢出切割元素

文章推荐： c++ - Unresolved inclusion

vue.js - 如何改变按钮点击时的颜色？ (视)
我正在尝试获得一个按钮，按下该按钮时会改变颜色。当再次按下时，它应该变回原来的颜色。我究竟做错了什么？我的模板中的按钮: export default { data: {

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 无需滚动即可在所有平台上将所有元素放入视口(viewport)中