个人中心
gpt4 book ai didi

html - 如何在带有百分比的网格中将固定高度的行作为最后一行

转载 作者：行者123 更新时间：2023-11-28 14:03:54 24 4
gpt4 key购买 nike

我目前正尝试在我的最后一行的网格中设置一个高度，但它总是被忽略。这是我最终想要的，可行，但我最后一行的大小随屏幕大小而变化: enter image description here

这是我目前的风格:

html, body {
  margin: 0px;
  min-height: 100%;
  height: 100%;
  overflow: hidden;
}

* {
  box-sizing: border-box;
}

.grid-container {
  display: grid;
  grid-template-columns: 85% 15%;
  grid-template-rows: 55px 23px 54% 34% 50px;
  grid-gap: 0px;
  height: 100vh;
}

.menu {
  position: relative;
}

.userInfo {
  text-align: center;
  float: right;
  background-color: #585858;
}

.userInfo div {
  margin: 8px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  resize: vertical;
  overflow: auto;
}

.task {
  background: white;
  border: 1px black solid;
  border-bottom: 0px black solid;
  grid-row: 2;
  grid-column: 2;
}

.taskList {
  text-align: center;
  max-height: 577px;
  overflow-y: auto;
  overflow-x: hidden;
  grid-row: 3;
  grid-column: 2;
}

.taskModel {
  text-align: center;
  overflow-y: auto;
  overflow-x: hidden;
  grid-row: 4;
  grid-column: 2;
}

.info {
  text-align: left;
  grid-row: 5;
  grid-column: 1;
}

.create {
  text-align: center;
  grid-row: 5;
  grid-column: 2;
}

dx-scheduler {
  grid-row: 2 / 5;
  grid-column: 1;
}
<html>
<head>
  <link href="grid.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="grid-container">
  <div class="menu">
    <button>
      <span style="color: #790614; font-weight: bold;">Bug</span> or 
      <span style="color: #ff9d00">Change Request</span>
    </button>
    <button>Configuration</button>
    <button>Export CSV</button>
    <button>
      <span>Vacations</span><br />
      <span style="color: #d1d1d1">Absences</span> 
    </button>
  </div>

  <div class="userInfo">
    <div>
      <span style="color: white; overflow: hidden; text-overflow: ellipsis;">
        Username
      </span>
      <button  style="height: 28px;">Disconnect</button>
    </div>
  </div>

<div class="dx-scheduler">
  <div>A calendar</div>
</div>
  
  <div class="task">
    <div style="height:23px;display: grid;grid-template-columns: 100%">      
      <input name="taskFilterText" type="text" placeholder="Search"
             style="float: left; margin-right: 25px;border: 0;">
    </div>
  </div>

  <div class="taskList">
    <p>Repeat me</p>
    <p>Repeat me</p>
    <p>Repeat me</p>
    <p>Repeat me</p>
    <p>Repeat me</p>
    <p>Repeat me</p>
    <p>Repeat me</p>
    <p>Repeat me</p>
    <p>Repeat me</p>
    <p>Repeat me</p>
    <p>Repeat me</p>
    <p>Repeat me</p>
    <p>Repeat me</p>
    <p>Repeat me</p>
    <p>Repeat me</p>
    <p>Repeat me</p>
    <p>Repeat me</p>
    <p>Repeat me</p>
    <p>Repeat me</p>
    <p>Repeat me</p>
    <p>Repeat me</p>
    <p>Repeat me</p>
    <p>Repeat me</p>
    <p>Repeat me</p>
    <p>Repeat me</p>
    <p>Repeat me</p>
    <p>Repeat me</p>
    <p>Repeat me</p>
    <p>Repeat me</p>
    <p>Repeat me</p>
    <p>Repeat me</p>
    <p>Repeat me</p>
    <p>Repeat me</p>
    <p>Repeat me</p>
    <p>Repeat me</p>
    <p>Repeat me</p>
    <p>Repeat me</p>
    <p>Repeat me</p>
    <p>Repeat me</p>
    <p>Repeat me</p>
    <p>Repeat me</p>
    <p>Repeat me</p>
    <p>Repeat me</p>
    <p>Repeat me</p>
    <p>Repeat me</p>
    <p>Repeat me</p>
    <p>Repeat me</p>
    <p>Repeat me</p>
    <p>Repeat me</p>
    <p>Repeat me</p>
    <p>Repeat me</p>
    <p>Repeat me</p>
    <p>Repeat me</p>
    <p>Repeat me</p>
    <p>Repeat me</p>
    <p>Repeat me</p>
    <p>Repeat me</p>
    <p>Repeat me</p>
    <p>Repeat me</p>
    <p>Repeat me</p>
    <p>Repeat me</p>
    <p>Repeat me</p>
    <p>Repeat me</p>
    <p>Repeat me</p>
    <p>Repeat me</p>
    <p>Repeat me</p>
    <p>Repeat me</p>
    <p>Repeat me</p>
    <p>Repeat me</p>
    <p>Repeat me</p>
    <p>Repeat me</p>
    <p>Repeat me</p>
    <p>Repeat me</p>
    <p>Repeat me</p>
    <p>Repeat me</p>
    <p>Repeat me</p>
    <p>Repeat me</p>
    <p>Repeat me</p>
    <p>Repeat me</p>
    <p>Repeat me</p>
  </div>
  
  <div class="taskModel">
    <p>Repeat after me</p>
    <p>Repeat after me</p>
    <p>Repeat after me</p>
    <p>Repeat after me</p>
    <p>Repeat after me</p>
    <p>Repeat after me</p>
    <p>Repeat after me</p>
    <p>Repeat after me</p>
    <p>Repeat after me</p>
    <p>Repeat after me</p>
    <p>Repeat after me</p>
    <p>Repeat after me</p>
    <p>Repeat after me</p>
    <p>Repeat after me</p>
    <p>Repeat after me</p>
    <p>Repeat after me</p>
    <p>Repeat after me</p>
    <p>Repeat after me</p>
    <p>Repeat after me</p>
    <p>Repeat after me</p>
  </div>

  <div class="info">
    <div style="margin-top: 2px;">
      <div style="margin-top: 3px;float: left">
        <span style="font-weight: bold;">H. remanining sickness</span>
        
      </div>

      <div style="margin-top: 2px;float: left">
        <input type="checkbox"
        style="margin: 0px 4px 0px 20px;width: 18px;height: 18px;"/><span style="float:right;margin-top: 1px;">Count today.</span>
      </div>
    </div>
  </div>

  <div class="create">
    <div>
        <button>+ model</button>
    </div>
  </div>
</div>
</body>
</html>

除了dx-scheduler是一个组件，其他都是DIV。我还想说 .taskList 和 .taskModel 需要有滚动条，因为它包含一个元素列表。我的最后一行 50px 有什么方法可以工作吗？

编辑:我已经放置了 HTML，以便它可以显示实际问题。

最佳答案

试试这个，从其他 % 行中减去最后一行对于您要执行的操作，您希望行数等于 100%。

    grid-template-rows: 55px 23px calc(66% - 128px) 34% 50px;

fiddle with example

关于html - 如何在带有百分比的网格中将固定高度的行作为最后一行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57414433/

24 4 0
文章推荐： jquery - 使用图像中的链接时无法让 fancybox 工作
文章推荐： css - 如何在 inline-flex 元素的一侧创建边距？
文章推荐： javascript - CKEDITOR ajax 帖子
文章推荐： javascript - Jquery - 如何将变量传递到函数中以供使用？
行者123
个人简介

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

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com