英文:
css, how to fill remaining space without fixed container
问题
I try many similar post like https://stackoverflow.com/questions/90178/make-a-div-fill-the-height-of-the-remaining-screen-space without any success since it's required a fixed height container and i don't have it
我尝试了许多类似的帖子，如https://stackoverflow.com/questions/90178/make-a-div-fill-the-height-of-the-remaining-screen-space，但都没有成功，因为它需要一个固定高度的容器，而我没有它。
I have similar structure
我有类似的结构
#content {
height: 100%;
display: grid;
grid-template-rows: auto 1fr;
}
#remaining {
background-color: red;
}
<body>
<header>
可变内容
</header>
<main>
可变内容
<div id="pagina-id">
<h1>标题</h1>
可变内容
<div class="tabs">
<ul>
<li>标签1</li>
<li>标签2</li>
</ul>
<div id="content">
<div>
可变内容
</div>
<div id="remaining">
应占据整个页面的剩余空间
</div>
</div>
</div>
</div>
</main>
</body>
where #remaining should take all page remaining space.
其中#remaining 应占据整个页面的剩余空间。
all outer containers are not in my total control since are dynamically generated
所有外部容器都不在我的完全控制之下，因为它们是动态生成的。
英文:
I try many similar post like <https://stackoverflow.com/questions/90178/make-a-div-fill-the-height-of-the-remaining-screen-space> without any success since it's required a fixed height container and i don't have it
I have similar structure
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
#content {
height: 100%;
display: grid;
grid-template-rows: auto 1fr;
}
#remaining {
background-color: red;
}
<!-- language: lang-html -->
<body>
<header>
variable content
</header>
<main>
variable content
<div id="pagina-id">
<h1>Title</h1>
variable content
<div class="tabs">
<ul>
<li>tab1</li>
<li>tab2</li>
</ul>
<div id="content">
<div>
variable content
</div>
<div id="remaining">
content that should take all page's remaining space
</div>
</div>
</div>
</div>
</main>
</body>
<!-- end snippet -->
where #remaining should take all page remaining space.
all outer containers are not in my total control since are dynamically generated
i try to set flex or grid to #content div and set it to height 100% without success
答案1
得分: 2
以下是您要翻译的内容：
"It's really not easy if the structure changes. But as described like you did, it should be possible to use several times flexbox in a column mode as you know almost where the content changes.
It might break some of the rest of the layout of your page because you may have some float or other CSS rules. You'll probably have to adapt a bit.
I added a pagina class to your <div id="pagina-id"> as I expect that the id changes. But you could replace .pagina by [id^="pagina-"] if you cannot change the generated HTML.
/* Change box sizing to simplify matters. */
html {
box-sizing: border-box;
}
*, *::before, *::after {
box-sizing: inherit;
}
html {
font: 16px/1.4 Arial, sans-serif;
/* You have to set a height to if not you cannot get min-height working on
height: 100%;
background: #eee;
}
body {
margin: 1em;
padding: 1em;
min-height: calc(100% - 2em);
display: flex;
flex-direction: column;
background: white;
box-shadow: 0 0 .5em rgba(0, 0, 0, 0.2);
}
/* Several childs will have to have the same way of growing vertically with a flex in column mode. /
main,
.pagina,
.tabs,
#content {
flex: 1; / To make it grow vertically */
/* We also want it to be displayed as flex so that we can do the same for the child items. */
display: flex;
flex-direction: column;
}
#remaining {
/* Make it the only cell to grow inside #content. /
flex: 1;
/ Visually show that this cell grows vertically. */
background-color: #f8f8f8;
background-image: linear-gradient(
45deg,
white 25%,
#f8f8f8 25%,
#f8f8f8 50%,
white 50%,
white 75%,
#f8f8f8 75%,
#f8f8f8 100%);
background-size: 3em 3em;
}
variable content
Title
variable content
- tab1
- tab2
If the structure isn't at all handled by you, then I would switch to some JavaScript code. You'll have to react to all window resize events to re-run the calculation of the height to set to your #remaining element in case the height of the page is lower than the window height. You could use the resize observer in order to detect changes and do this calculation. It's not very clean and sexy but I don't know what else you could do."
英文:
It's really not easy if the structure changes. But as described like
you did, it should be possible to use several times
flexbox
in a column mode as you know almost where the content changes.
It might break some of the rest of the layout of your page because you
may have some float or other CSS rules. You'll probably have to adapt a
bit.
I added a pagina class to your <div id="pagina-id"> as I expect
that the id changes. But you could replace .pagina by
[id^="pagina-"] if you cannot change the generated HTML.
<!-- begin snippet: js hide: false console: true babel: null -->
<!-- language: lang-css -->
/* Change box sizing to simplify matters. */
html {
box-sizing: border-box;
}
*, *::before, *::after {
box-sizing: inherit;
}
html {
font: 16px/1.4 Arial, sans-serif;
/* You have to set a height to <html> if not
you cannot get min-height working on <body>. */
height: 100%;
background: #eee;
}
body {
margin: 1em;
padding: 1em;
min-height: calc(100% - 2em);
display: flex;
flex-direction: column;
background: white;
box-shadow: 0 0 .5em rgba(0, 0, 0, 0.2);
}
/* Several childs will have to have the same
way of growing vertically with a flex in
column mode. */
main,
.pagina,
.tabs,
#content {
flex: 1; /* To make it grow vertically */
/* We also want it to be displayed as flex so
that we can do the same for the child items. */
display: flex;
flex-direction: column;
}
#remaining {
/* Make it the only cell to grow inside #content. */
flex: 1;
/* Visually show that this cell grows vertically. */
background-color: #f8f8f8;
background-image: linear-gradient(
45deg,
white 25%,
#f8f8f8 25%,
#f8f8f8 50%,
white 50%,
white 75%,
#f8f8f8 75%,
#f8f8f8 100%);
background-size: 3em 3em;
}
<!-- language: lang-html -->
<body>
<header>
variable content
</header>
<main>
variable content
<div id="pagina-id" class="pagina">
<h1>Title</h1>
variable content
<div class="tabs">
<ul>
<li>tab1</li>
<li>tab2</li>
</ul>
<div id="content">
<div>
variable content
</div>
<div id="remaining">
content that should take all page's remaining space
</div>
</div>
</div>
</div>
</main>
</body>
<!-- end snippet -->
If the structure isn't at all handled by you, then I would switch
to some JavaScript code. You'll have to react to all window resize
events to re-run the calculation of the height to set to your
#remaining element in case the height of the page is lower than
the window height. You could use the
resize observer in order to detect changes and do this calculation.
It's not very clean and sexy but I don't know what else you could do.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论