时间戳

首页 > 解决方案 > CSS - 如何创建一个占据屏幕剩余宽度的网格（不计算侧边栏）

javascript - CSS - 如何创建一个占据屏幕剩余宽度的网格（不计算侧边栏）

问题描述

我正在尝试在 CSS 中创建一个网格，但我不确定如何指定整个网格的宽度，以便它只占用屏幕的剩余宽度（减去侧边栏），这样就不应该有任何滚动水平允许。以下是我面临的问题的屏幕截图。

在此处输入图像描述

如您所见，启用了水平滚动，因为网格太宽了。

这是我的参考代码：（我正在使用 ReactJS）

.analytics-grid {
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  row-gap: 10px;
  column-gap: 10px;
  grid-template-areas: "conversion conversion-daily"
}

.daily-conversion-box {
  grid-area: conversion-daily;
  padding: 20px;
}

.conversion-box {
  grid-area: conversion;
  padding: 20px;
}

jsx（其中 CustomerConversion 和 CustomerConversionDaily 是我调用来渲染图表的子组件）

<div className='analytics-grid'>
    <div className='conversion-box'>
        <CustomerConversion />
    </div>
    <div className='daily-conversion-box'>
        <CustomerConversionDaily />
    </div>

sidebar.js（其中 Sider 是来自 UI 包 AntD 的组件）

<div>
    <Sider trigger={null} collapsible collapsed={collapsed}>
        {menu()}
    </Sider>
    <div id='crm-header-layout'>
        ... *header goes here* ...
        <div id="crm-content">
            {props.children}  //this is where the analytics grid from above end up
        </div>
    </div>
</div>

有没有办法让我能够指定我的网格的宽度，这样它就可以很好地占据屏幕的剩余宽度减去侧边栏，这样就不需要进行水平滚动了？感谢大家的帮助，我是 CSS 新手，所以如果有更好的解决方案来完成我想要完成的任务，请指导我！谢谢

标签： javascripthtmlcssreactjs

解决方案

当你设置display: grid;它意味着这个节点的孩子使用网格排列。它不会为您设置 div 的高度或宽度。如果要包含它，则需要设置它。

有多种设置宽度的方法。

  1. 您可以像使用容器一样使用网格。像这样，

.container {
  display: grid;
  grid-template: 1fr / 80px 1fr;
}

.content-1 {
  background-color: red;
}

.content-2 {
  background-color: blue;
}
<div class="container">
  <div class="content-1">Content 1</div>
  <div class="content-2">Content 2</div>
</div>

  1. 您可以在 flex 中同时包含 appbar 和内容，并将flex-grow容器设置为1.
.app{
  display: flex;
}

.appbar{
flex-grow: 0;
}

.main-container{
flex-grow: 1;
}

或者，

对这样的容器使用 CSS calc。

.analytics-grid {
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  row-gap: 10px;
  column-gap: 10px;
  grid-template-areas: "conversion conversion-daily";
  width: calc(100vw - <appbar width>);
}

PS：grid-template是一次设置行和列的简写。参考https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template

推荐阅读