Question

使用css可以实现以下目标吗？如果没有，即使绿框改变内容，还会使用哪些javascript事件？

我想垂直放置三个方框：

第一个（绿色的）可以有一些可变数量的内容，并且框应该展开以适合内容。此框应与浏览器顶部齐平。
最后一个，黄色的，将有固定数量的内容（意思是我知道'编译时'的内容是什么）。此框应与浏览器底部齐平。
中间的那个，红色的，将具有灵活的内容量，并且应该从绿色框的底部延伸到黄色框的顶部，并且如果其内容大于它，则在内部它需要是可滚动的。盒子大小。

这是我到目前为止所做的，并且它不起作用 - 我似乎无法使黄色框的底部与视口的底部齐平，以便让红色框占用了所有额外的空间（即位置：绝对似乎没有帮助）。

#container {
    float: left;
    height: 100%;
    background-color:gray;
}

#header {
    background-color: green;
}

#main {
    overflow: auto;
    background-color: red;
    height: 70%;
}

#footer {
    background-color:yellow;
}

<div id="container">
  <div id="header">START OF HEADER CONTENT...</div>
  <div id="main">Craft beer jean shorts...</div>
  <div id="footer">footer some stuff goes here</div>
</div>

这就是它的样子：

这是一个jsfiddle：https://jsfiddle.net/n6cmdcj3/，但请注意它可能没有帮助，因为html框不符合视口大小 - 不知道如何使它如此

Answer 1

使用flexbox可以相当轻松地完成此操作。查看support tables的兼容性。

html,
body {
	width: 100%;
	height: 100%;
}

#container {
    float: left;
    height: 100%;
    background-color: purple;
    position: relative;
	display: flex;
	flex-direction: column;
}

#header {
    background-color: green;
}

#main {
    overflow: hidden;
	overflow-y: scroll;
	-webkit-overflow-scrolling: touch;
    background-color: red;
	flex: 1;
	flex-grow: 1;
}

#footer {
    background-color:yellow;
}

    <body>
        <div id="container">
            <div id="header">
                START OF HEADER CONTENT and the viewer should be able to see all of it. Ipsum Blaster jango fett alderaan data dooku validium hypercube. Antilles mace windu uhura xindi millenium falcon bothan exterminate tylium ore. Endor maul skywalker everlasting matches antilles FTL tylium ore dooku. Paradox machine padawan speeder doctor who chewbacca AT-AT frack dagobah ice gun. Uhura data photon torpedo worf landspeeder starbuck hypercube cantina. END OF HEADER CONTENT
            </div>
            <div id="main">
Craft beer jean shorts beard green juice, kinfolk 8-bit hoodie single-origin coffee letterpress seitan four dollar toast hammock occupy selfies pug. Retro locavore meditation craft beer viral, vinyl health goth cred butcher echo park. Echo park portland helvetica roof party hammock, food truck messenger bag pop-up poutine master cleanse hella artisan etsy. Celiac polaroid before they sold out tousled chillwave farm-to-table, leggings craft beer mlkshk viral seitan vegan intelligentsia. Yuccie synth poutine next level food truck, meggings chambray aesthetic farm-to-table marfa helvetica dreamcatcher blue bottle mumblecore brunch. Fixie narwhal lomo, art party pinterest direct trade poutine mlkshk organic forage irony. Wolf kickstarter authentic dreamcatcher plaid.

Yuccie tilde try-hard selfies gentrify DIY. Offal celiac gentrify cornhole, chia beard scenester quinoa freegan marfa thundercats pour-over synth. Migas salvia franzen pabst, blog listicle freegan chia YOLO fashion axe locavore offal. Paleo whatever messenger bag, 3 wolf moon normcore aesthetic humblebrag pug narwhal lo-fi lomo lumbersexual. Chambray yuccie selfies, tattooed biodiesel pitchfork artisan mixtape actually iPhone single-origin coffee 8-bit master cleanse aesthetic. Kickstarter chillwave VHS tousled green juice. Meggings mumblecore gentrify chambray blue bottle brooklyn.

Four dollar toast sriracha hammock iPhone authentic, quinoa wayfarers pop-up taxidermy post-ironic next level offal YOLO chartreuse fingerstache. Forage salvia direct trade photo booth YOLO, fixie paleo sartorial deep v. Distillery art party pop-up meggings sartorial thundercats vice, portland jean shorts flannel readymade godard. 3 wolf moon single-origin coffee you probably haven't heard of them chillwave selfies cred. Scenester asymmetrical seitan blue bottle bitters banh mi swag, etsy disrupt 90's. Kombucha normcore echo park, photo booth bushwick stumptown retro before they sold out. Chillwave art party heirloom ugh.

Cliche authentic paleo fingerstache banjo actually artisan sriracha helvetica twee, trust fund portland PBR&B. Aesthetic pork belly pop-up bitters distillery, banh mi try-hard cred meditation letterpress schlitz 90's celiac neutra. Irony street art actually cliche cray asymmetrical. Bicycle rights kombucha beard crucifix, deep v cray 3 wolf moon listicle before they sold out shabby chic distillery pitchfork. Meh aesthetic tacos flannel, pug paleo DIY austin. Gastropub kinfolk cliche crucifix, swag post-ironic irony heirloom keytar thundercats 8-bit beard. You probably haven't heard of them migas marfa leggings normcore.

Four loko gentrify ramps, mixtape sartorial fashion axe ethical organic meditation williamsburg. Blue bottle freegan synth hoodie, swag bitters letterpress chillwave pop-up. Hella chicharrones next level ramps chillwave, portland freegan tattooed neutra disrupt austin 3 wolf moon kale chips roof party. Lumbersexual try-hard cold-pressed, affogato offal bushwick thundercats stumptown. Leggings knausgaard gastropub, raw denim bitters lo-fi four dollar toast tilde truffaut meh. Truffaut umami artisan, irony affogato tattooed literally yuccie pabst chia wolf hammock craft beer photo booth. Lomo roof party tumblr thundercats meggings ennui messenger bag, next level franzen synth kickstarter pork belly vegan.
            </div>
            <div id="footer">
                footer some stuff goes here
            </div>
        </div>

    </body>

Answer 2

#container {
    float: left;
    height: 100%;
    background-color:gray;
    position: relative;
}

#header {
    background-color: green;
    height: auto;
}

#main {
    overflow: auto;
    background-color: red;
    height: 70%;
    overflow-y: scroll
    -webkit-overflow-y: scroll;
    -moz-overflow-y: scroll;
}

#footer {
    background-color:yellow;
    height: 25px;
}

我会这样做。没理由太复杂。

链接： https://jsfiddle.net/n6cmdcj3/3/

我还会利用主要ID的设置像素，因为您正在尝试建立滚动内容div。

如果我错了，请纠正我，但我也相信这些应该是不是id的课程。类是用于可重用的名称，例如，您将使用类来更新div的所有颜色，但您不会使用id。如果您需要某些特定内容，而不是在网站上的任何其他地方实施，则会使用ID。它只是一个很好的编程实践，它会在您使用JavaScript时稍后付出代价。

ID =单一更改元素 Class =可重复使用的多个元素。

Answer 3

Josh Rutherford的答案非常适合flexbox。如果要使用更传统的布局，则必须将顶部元素设置为固定高度并使用vh单位。 CSS将如下所示：

.container {
  height: 100vh;
}

.top {
  background-color: #f2f2f2;
  height: 24vh;
  overflow: hidden;
  padding: 20px;
}

.middle {
  background-color: #h2h2h2; 
  height: 55vh;
  padding: 20px;
  overflow-y: scroll;
}
.bottom {
  background-color: #d2d2d2;
  height: 3vh;
  padding: 20px;
  position: fixed;
  bottom: 0;
  width: 100%;
}

CodePen上的演示：http://codepen.io/staypuftman/pen/eJvdYv

垂直放置三个元素：柔性盒子，滚动盒子和固定框

3 个答案: