blocks|key|2285872|text|.page-test+{position:+absolute;bottom:+0;width:+100%25;+height:+50%25;background-color:violet;}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|2285873|这就是你要找的东西吗？我更改了您的高度，以便在JsFiddle中显示得更好|unstyled|2285874|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

<pre><code>.page-test {position: absolute;bottom: 0;width: 100%; height: 50%;background-color:violet;}
</code></pre>

<p>Is this what you are looking for?
I changed your height so it would better display in JsFiddle</p>


blocks|key|2498592|text|这就是你的意思吗？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2498593|您可以根据视图高度vh进行计算。请注意，在旧浏览器中，calc是而不是。|offset|length|style|CODE|BOLD|2498594|更新到新规范的|2498595|由于需求是为了满足.head元素的动态高度，因此您将需要JavaScript来实现这一点。CSS不是为了从DOM获取值然后应用它而设计的。这就是我们有JavaScript的原因|2498596|​|2498597|document.addEventListener('DOMContentLoaded',+function()+{
++resizePage();
},+false);

document.addEventListener("resize",+resizePage);

function+resizePage()+{
++var+head+=+document.querySelector(".head");
++var+pageTest+=+document.querySelector(".page-test");

++pageTest.style.height+=+"calc(100vh+-+"+%2B+head.offsetHeight+%2B+"px)";
}|code-block|syntax|javascript|2498598|.screen-emulator+{
++width:+300px;
++height:+400px;
++background-color:+red;
}

.head+{
++width:+100%25;
++height:+70px;
++background-color:+blue;
}

.body+{
++width:+100%25;
++height:+100%25;
++overflow-y:+auto;
}

.page+{
++position:+relative;
++width:+100%25;
++height:+500px;
++background-color:+black;
}

.page-test+{
++position:+absolute;
++width:+100%25;
++height:+100vh;
++background-color:+violet;
}|2498599|<div+class="screen-emulator">
++<div+class="head">Head</div>
++<div+class="body">
++++<div+class="page">
++++++<div+class="page-test">page-test</div>
++++</div>
++</div>
</div>|2498600|2498601|entityMap^0|0|9|2|R|4|W|3|0|0|0|2G|9|5|S|A|19|3|1H|3|23|A|0|0|1|0|0|0|0|0|1|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|11|8|@$D|12|E|13|F|G]|$D|14|E|15|F|G]|$D|16|E|17|F|H]]|9|@]|A|$]]|$1|I|3|J|5|6|7|18|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|19|8|@$D|1A|E|1B|F|H]|$D|1C|E|1D|F|G]|$D|1E|E|1F|F|G]|$D|1G|E|1H|F|G]|$D|1I|E|1J|F|G]|$D|1K|E|1L|F|G]]|9|@]|A|$]]|$1|M|3|N|5|6|7|1M|8|@$D|1N|E|1O|F|H]]|9|@]|A|$]]|$1|O|3|P|5|Q|7|1P|8|@]|9|@]|A|$R|S]]|$1|T|3|U|5|Q|7|1Q|8|@]|9|@]|A|$R|S]]|$1|V|3|W|5|Q|7|1R|8|@]|9|@]|A|$R|S]]|$1|X|3|N|5|6|7|1S|8|@$D|1T|E|1U|F|H]]|9|@]|A|$]]|$1|Y|3|-4|5|6|7|1V|8|@]|9|@]|A|$]]]|Z|$]]

<p>Is this what you mean?</p>

<p>You can calculate based on the view height <code>vh</code>. Note that <code>calc</code> is <strong>not</strong> supported in old browsers.</p>

<p><strong>Updated to new specifications</strong></p>

<p>Since the requirement is to cater for dynamic height of the <code>.head</code> element, you will need <code>JavaScript</code> to accomplish this. <code>CSS</code> is not designed to get values from the <code>DOM</code> and then apply it. That's why we have <code>JavaScript</code></p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>document.addEventListener('DOMContentLoaded', function() {
  resizePage();
}, false);

document.addEventListener("resize", resizePage);

function resizePage() {
  var head = document.querySelector(".head");
  var pageTest = document.querySelector(".page-test");

  pageTest.style.height = "calc(100vh - " + head.offsetHeight + "px)";
}</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>.screen-emulator {
  width: 300px;
  height: 400px;
  background-color: red;
}

.head {
  width: 100%;
  height: 70px;
  background-color: blue;
}

.body {
  width: 100%;
  height: 100%;
  overflow-y: auto;
}

.page {
  position: relative;
  width: 100%;
  height: 500px;
  background-color: black;
}

.page-test {
  position: absolute;
  width: 100%;
  height: 100vh;
  background-color: violet;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="screen-emulator"&gt;
  &lt;div class="head"&gt;Head&lt;/div&gt;
  &lt;div class="body"&gt;
    &lt;div class="page"&gt;
      &lt;div class="page-test"&gt;page-test&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|2286196|text|您可以将.page-test的min-height或height设置为100vh。这将忽略父div的高度而采用屏幕的高度(如果你不介意溢出的话)|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2286197|更新css|2286198|.page-test+{
++position:+absolute;
++width:+100%25;
++/*+min-height:+100vh;+*/
++height:+100vh;
++background-color:+violet;
}|code-block|syntax|javascript|2286199|entityMap^0|4|A|F|A|Q|6|Z|5|0|2|3|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]|$9|R|A|S|B|C]|$9|T|A|U|B|C]|$9|V|A|W|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|X|8|@$9|Y|A|Z|B|C]]|D|@]|E|$]]|$1|H|3|I|5|J|7|10|8|@]|D|@]|E|$K|L]]|$1|M|3|-4|5|6|7|11|8|@]|D|@]|E|$]]]|N|$]]

<p>You can set the <code>min-height</code> or <code>height</code> of <code>.page-test</code> to <code>100vh</code>. This will ignore whatever height of the parent div and take that of the screen (if you don't mind overflows)</p>

<p>Update <code>css</code></p>

<pre><code>.page-test {
  position: absolute;
  width: 100%;
  /* min-height: 100vh; */
  height: 100vh;
  background-color: violet;
}
</code></pre>


blocks|key|2286265|text|如果我没理解错的话，我想flexbox就是答案。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2286266|首先，显式地设置所有元素的边距和填充为零(有时称为引导)，这将覆盖浏览器应用的任何默认用户代理样式。|2286267|将.screen-emulator+height设置为100vh，并将其设置为flexbox容器。您不想更改.head的未知高度，因此我们设置了flex:+none;。.body是唯一一个使用flex:+1;保持剩余可用高度的flex项目。https://css-tricks.com/boxes-fill-height-dont-squish/|offset|length|style|CODE|2286268|​|2286269|body,
.screen-emulator,
.head,
.body,
.page,
.page-test+{
++margin:+0;
++padding:+0;
}

.screen-emulator+{
++width:+300px;
++height:+100vh;
++background-color:+red;
++display:+flex;
++flex-direction:+column;
}

.head+{
++width:+100%25;
++background-color:+blue;
++flex:+none;
}

.body+{
++width:+100%25;
++flex:+1;
++overflow-y:+auto;
}

.page+{
++position:+relative;
++width:+100%25;
++min-height:+100%25;
++background-color:+black;
}

.page-test+{
++position:+absolute;
++width:+100%25;
++min-height:+100%25;
++background-color:+violet;
}|code-block|syntax|javascript|2286270|<div+class="screen-emulator">

++<div+class="head">
++++<h1>Head</h1>
++++<p>Random+content</p>
++</div>
++<div+class="body">
++++<div+class="page">

++++++<div+class="page-test">
++++++++<p>
++++++++++Lorem+ipsum+dolor+sit+amet,+consectetur+adipiscing+elit,+sed+do+eiusmod+tempor+incididunt+ut+labore+et+dolore+magna+aliqua.+Senectus+et+netus+et+malesuada+fames+ac+turpis+egestas.+Massa+tincidunt+dui+ut+ornare+lectus+sit+amet.+Posuere+ac+ut+consequat
++++++++++semper+viverra+nam+libero+justo+laoreet.+Sit+amet+commodo+nulla+facilisi+nullam+vehicula+ipsum+a+arcu.+Phasellus+vestibulum+lorem+sed+risus.+Congue+eu+consequat+ac+felis+donec+et+odio+pellentesque+diam.+Consectetur+lorem+donec+massa+sapien+faucibus

++++++++</p>
++++++++<p>
++++++++++Nisl+suscipit+adipiscing+bibendum+est+ultricies+integer+quis.+Pellentesque+diam+volutpat+commodo+sed+egestas+egestas+fringilla+phasellus+faucibus.+Netus+et+malesuada+fames+ac+turpis+egestas.+Ultricies+mi+quis+hendrerit+dolor+magna+eget.+Tellus+mauris
++++++++++a+diam+maecenas+sed+enim.+Turpis+massa+tincidunt+dui+ut+ornare+lectus+sit.+Dolor+magna+eget+est+lorem+ipsum.+Sit+amet+consectetur+adipiscing+elit+ut.+Id+donec+ultrices+tincidunt+arcu+non+sodales.+Interdum+consectetur+libero+id+faucibus+nisl

++++++++</p>

++++++</div>

++++</div>
++</div>


</div>|2286271|2286272|entityMap|0|LINK|mutability|MUTABLE|url|https://css-tricks.com/boxes-fill-height-dont-squish/^0|0|0|1|G|R|5|1I|5|20|B|2C|5|2O|8|3C|1H|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|11|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|12|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|13|8|@$F|14|G|15|H|I]|$F|16|G|17|H|I]|$F|18|G|19|H|I]|$F|1A|G|1B|H|I]|$F|1C|G|1D|H|I]|$F|1E|G|1F|H|I]]|9|@$F|1G|G|1H|1|1I]]|A|$]]|$1|J|3|K|5|6|7|1J|8|@]|9|@]|A|$]]|$1|L|3|M|5|N|7|1K|8|@]|9|@]|A|$O|P]]|$1|Q|3|R|5|N|7|1L|8|@]|9|@]|A|$O|P]]|$1|S|3|K|5|6|7|1M|8|@]|9|@]|A|$]]|$1|T|3|-4|5|6|7|1N|8|@]|9|@]|A|$]]]|U|$V|$5|W|X|Y|A|$Z|10]]]]

<p>I think flexbox is the answer, if I understand the question correctly.</p>

<p>Start by explicitly setting all your elements' margin and padding to zero (sometimes called bootstrapping) this overrides any default user agent styles applied by the browser.</p>

<p>Set the <code>.screen-emulator</code> height to <code>100vh</code> and make it the flexbox container. You don't want to change the unknown height of the <code>.head</code> so we set <code>flex: none;</code>. The <code>.body</code> is the only flex item taking the remaining available height with <code>flex: 1;</code>.
<a href="https://css-tricks.com/boxes-fill-height-dont-squish/" rel="nofollow noreferrer">https://css-tricks.com/boxes-fill-height-dont-squish/</a></p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>body,
.screen-emulator,
.head,
.body,
.page,
.page-test {
  margin: 0;
  padding: 0;
}

.screen-emulator {
  width: 300px;
  height: 100vh;
  background-color: red;
  display: flex;
  flex-direction: column;
}

.head {
  width: 100%;
  background-color: blue;
  flex: none;
}

.body {
  width: 100%;
  flex: 1;
  overflow-y: auto;
}

.page {
  position: relative;
  width: 100%;
  min-height: 100%;
  background-color: black;
}

.page-test {
  position: absolute;
  width: 100%;
  min-height: 100%;
  background-color: violet;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="screen-emulator"&gt;

  &lt;div class="head"&gt;
    &lt;h1&gt;Head&lt;/h1&gt;
    &lt;p&gt;Random content&lt;/p&gt;
  &lt;/div&gt;
  &lt;div class="body"&gt;
    &lt;div class="page"&gt;

      &lt;div class="page-test"&gt;
        &lt;p&gt;
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Senectus et netus et malesuada fames ac turpis egestas. Massa tincidunt dui ut ornare lectus sit amet. Posuere ac ut consequat
          semper viverra nam libero justo laoreet. Sit amet commodo nulla facilisi nullam vehicula ipsum a arcu. Phasellus vestibulum lorem sed risus. Congue eu consequat ac felis donec et odio pellentesque diam. Consectetur lorem donec massa sapien faucibus

        &lt;/p&gt;
        &lt;p&gt;
          Nisl suscipit adipiscing bibendum est ultricies integer quis. Pellentesque diam volutpat commodo sed egestas egestas fringilla phasellus faucibus. Netus et malesuada fames ac turpis egestas. Ultricies mi quis hendrerit dolor magna eget. Tellus mauris
          a diam maecenas sed enim. Turpis massa tincidunt dui ut ornare lectus sit. Dolor magna eget est lorem ipsum. Sit amet consectetur adipiscing elit ut. Id donec ultrices tincidunt arcu non sodales. Interdum consectetur libero id faucibus nisl

        &lt;/p&gt;

      &lt;/div&gt;

    &lt;/div&gt;
  &lt;/div&gt;


&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|2498834|text|如果我理解你的问题，你想改变你的div的顺序。几天前我用Bootstrap做了一些移动视图：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2498835|@media+only+screen+and+(max-width:+960px)+{
++.col-xs-12+{
++++display:+flex;
++++flex-direction:+column-reverse;
++}
}


<div+class="row">
++<div+class="col-xs-12">
++++<div>This+one+is+in+Desktop+view+at+the+top,+and+in+mobile+at+the+end</div>
++++<div>This+one+is+at+Desktop+View+at+the+End,+and+in+mobile+at+the+top</div>
++</div>
</div>|code-block|syntax|javascript|2498836|然后，您可以根据您的目的调整此代码。这就是你的问题？|2498837|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>if i understood your question, you want to change the order of your div's.
I did that with Bootstrap a few days ago for some mobile View with:</p>

<pre><code>@media only screen and (max-width: 960px) {
  .col-xs-12 {
    display: flex;
    flex-direction: column-reverse;
  }
}


&lt;div class="row"&gt;
  &lt;div class="col-xs-12"&gt;
    &lt;div&gt;This one is in Desktop view at the top, and in mobile at the end&lt;/div&gt;
    &lt;div&gt;This one is at Desktop View at the End, and in mobile at the top&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>You can adjust this code then for your purposes.
Is that your question?</p>


<p>I have a special html structure that emulate an app structure with page.</p>

<p>Please visit the <a href="https://jsfiddle.net/98d6btmL/16/" rel="nofollow noreferrer">JsFiddle</a> first to understand the problem.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.screen-emulator {
  width: 300px;
  height: 400px;
  background-color: red;
}

.head {
  width: 100%;
  height: 70px;
  background-color: blue;
}

.body {
  width: 100%;
  height: 100%;
  overflow-y: auto;
}

.page {
  position: relative;
  width: 100%;
  height: 500px;
  background-color: black;
}

.page-test {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: violet;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="screen-emulator"&gt;
  &lt;div class="head"&gt;Head&lt;/div&gt;
  &lt;div class="body"&gt;
    &lt;div class="page"&gt;
      &lt;div class="page-test"&gt;page-test&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>So my question is: Is there a way in <code>css</code> to make <code>.page-test</code> go until the screen end and not until his parent (<code>.page</code>) end ?</p>

<p>The problem here is the <code>height: 100%;</code> property from <code>.page-test</code> that will make it go until <code>.page</code> bottom. I prefer to specify that <strong>I will not be able to change the HTML structure</strong> (even if it solves the problem) and that <strong>I don't know in advance the height of <code>.head</code></strong>.</p>


Make div go on screen bottom and not on parent bottom

我有一个特殊的html结构，它模拟了一个页面的应用程序结构。请先访问了解问题。​.screen-emulator {  width: 300px;  height: 400px;  background-color: red;}.head {  width: 100%;  height: 70px;  backgrou...

问将div放在屏幕底部而不是父级底部
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将div放在屏幕底部而不是父级底部EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将div放在屏幕底部而不是父级底部
EN