文章/答案/技术大牛

发布

问文本超过网格大小
EN

Stack Overflow用户

提问于 2020-12-26 18:34:48

回答 2查看 79关注 0票数 0

/* I have a grid inside another grid. The parent grid is set as follows: */

.container {
  display: grid;
  height: 100vh;
  grid-template-columns: 2.409fr 2.409fr 1fr;
  grid-template-rows: 1.5fr 5.5fr 5.5fr 1fr;
  grid-template-areas: 
    "header header sidePanel" 
    "pageContent pageContent sidePanel" 
    "pageContent pageContent sidePanel" 
    "footer footer sidePanel";
}


/* the pageContent class contains another 2x2 grid, with three elements: */

.content {
  grid-area: pageContent;
  background: #d123;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas: 
    "content-1 content-2" 
    "content-1 content-3";
}

.header {
  grid-area: header;
}

.footer {
  grid-area: footer;
}

.sidePanel {
  grid-area: sidePanel;
}

.content {
  grid-area: pageContent;
}

.content-1 {
  grid-area: content-1;
}

.content-2 {
  grid-area: content-2;
}

.content-3 {
  grid-area: content-3;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title></title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="container">
    <div class="header">My Header</div>
    <div class="sidePanel">My sidePanel</div>
    <div class="content">
      <div class="content-1">
        <span class="title">Main Article</span>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum rem ratione dolorum ducimus quaerat officiis voluptates obcaecati ab illo sequi, blanditiis vel dolore possimus labore asperiores architecto quia nobis accusantium beatae doloremque
          eveniet saepe excepturi laborum exercitationem delectus! Dolor, natus perferendis deleniti sequi veniam. In nemo mollitia dolor ipsam. Ipsa illum delectus eveniet. Explicabo perspiciatis eum distinctio vel quo iure, deleniti tempora dolorem
          facilis iste? Reprehenderit maxime neque porro optio, animi praesentium laboriosam recusandae! Ex nesciunt maxime dicta quo hic placeat laboriosam possimus totam, ab velit iure quisquam assumenda odit adipisci, eos voluptatum at qui sint aperiam
          blanditiis quos. Quos ratione, molestiae possimus repellendus eveniet et temporibus alias sunt perferendis quod odio, quis tenetur natus obcaecati! Doloremque omnis numquam quia.</p>
      </div>
      <div class="content-2">
        Content 2
      </div>
      <div class="content-3">
        Content 3
      </div>
    </div>
    <div class="footer">My Footer</div>

  </div>
</body>

</html>

我最大的困难是文字的放置。例如，如果我在内容1上放置一个文本，并调整页面的高度，文本就会在页脚后面重叠，超过它的网格，甚至超过容器网格。是否有任何方法将文本与其“网格区域”相匹配并相应地调整其大小？

html

css

回答 2

Stack Overflow用户

回答已采纳

发布于 2020-12-26 18:59:55

您的问题是，您正在为您的行设置“固定”高度。当你说：

grid-template-rows: 1.5fr 5.5fr 5.5fr 1fr;

这意味着一旦建立了可用的高度，您的网格将有一定的高度，不会根据文本调整大小。

我的建议是简单地改变这句话。例如，你可以给你的页眉和页脚一个固定的高度：

grid-template-rows: 100px auto auto 200px;

票数 0

Stack Overflow用户

发布于 2020-12-26 19:28:03

只需添加溢出规则即可。我刚刚将.content-1 { overflow-y: auto; }添加到您的代码中，如果文本高于框高，那么现在将得到一个滚动条。

body {
  margin: 0;
}

.container {
  box-sizing: border-box;
  display: grid;
  height: 100vh;
  grid-template-columns: 2.409fr 2.409fr 1fr;
  grid-template-rows: 1.5fr 5.5fr 5.5fr 1fr;
  grid-template-areas: 
    "header header sidePanel" 
    "pageContent pageContent sidePanel" 
    "pageContent pageContent sidePanel" 
    "footer footer sidePanel";
}

.content {
  grid-area: pageContent;
  background: #d123;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas: 
    "content-1 content-2" 
    "content-1 content-3";
}

.header {
  grid-area: header;
}

.footer {
  grid-area: footer;
}

.sidePanel {
  grid-area: sidePanel;
}

.content {
  grid-area: pageContent;
}

.content-1 {
  grid-area: content-1;
}

.content-2 {
  grid-area: content-2;
}

.content-3 {
  grid-area: content-3;
}

.content-1,
.content-2,
.content-3 {
  overflow-y: auto;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title></title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="container">
    <div class="header">My Header</div>
    <div class="sidePanel">My sidePanel</div>
    <div class="content">
      <div class="content-1">
        <span class="title">Main Article</span>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum rem ratione dolorum ducimus quaerat officiis voluptates obcaecati ab illo sequi, blanditiis vel dolore possimus labore asperiores architecto quia nobis accusantium beatae doloremque
          eveniet saepe excepturi laborum exercitationem delectus! Dolor, natus perferendis deleniti sequi veniam. In nemo mollitia dolor ipsam. Ipsa illum delectus eveniet. Explicabo perspiciatis eum distinctio vel quo iure, deleniti tempora dolorem
          facilis iste? Reprehenderit maxime neque porro optio, animi praesentium laboriosam recusandae! Ex nesciunt maxime dicta quo hic placeat laboriosam possimus totam, ab velit iure quisquam assumenda odit adipisci, eos voluptatum at qui sint aperiam
          blanditiis quos. Quos ratione, molestiae possimus repellendus eveniet et temporibus alias sunt perferendis quod odio, quis tenetur natus obcaecati! Doloremque omnis numquam quia.</p>
      </div>
      <div class="content-2">
        Content 2
      </div>
      <div class="content-3">
        Content 3
      </div>
    </div>
    <div class="footer">My Footer</div>

  </div>
</body>

</html>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/65459497

复制

相似问题

问文本超过网格大小
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问文本超过网格大小EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问文本超过网格大小
EN