Question

#content

所以我的导航栏和页脚的高度可变。我希望我的页脚粘在底部，#navbar填充可用的垂直空间 - 即使#content + public class Game implements Runnable, KeyListener { JFrame _frame = new JFrame("Window"); JPanel _pan = new JPanel(); Character[] buttonsToAdd = { 'A', 'B', 'C', 'D' }; List<Character> shuffled = Arrays.asList(buttonsToAdd); Map<Character, JButton> buttons = new HashMap<Character, JButton>(); @Override public void run() { _frame.add(_pan); _frame.setVisible(true); _pan.setLayout(new GridLayout(buttonsToAdd.length, 0)); for (char c : buttonsToAdd) { JButton button = new JButton(c + ""); Collections.shuffle(shuffled); _pan.add(button); buttons.put(c, button); button.addKeyListener(this); } _frame.pack(); _frame.setLocationRelativeTo(null); _frame.setResizable(true); } @Override public void keyTyped(KeyEvent e) { } @Override public void keyPressed(KeyEvent e) { char key = e.getKeyChar(); System.out.println(key); JButton button = null; if ((button = buttons.get(Character.toUpperCase(key))) != null) { _pan.remove(button); _pan.invalidate(); _frame.repaint(); } } @Override public void keyReleased(KeyEvent e) { } } +＆＃39;＃footer＆＃39;实际空间将小于显示高度。

由于我很遗憾不知道如何才能实现这一目标，我只是在没有任何结果的情况下提出要求 - 好吧我尝试了一些东西，但没有成功：|

JSFiddle

Answer 1

以下是符合您要求的基本Flexbox布局，请阅读代码Fiddle中的评论，并开始了解如何在Flexbox|Codrops CSS Reference

上展示您的网站

The Snippet

html, body{
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}

body { 
  max-width: 100%;
  max-height: 100%;
  margin: 0 auto                  /* center body if max-width <100% */
}

ul, li {
  list-style: none;
  padding: 0;
}

li {
  display: inline
}

body{
  display: flex;                  /* Enter flexbox layout */
  flex-direction: column;         /* a column of several rows */
  justify-content: space-between; /* moves header up, footer down*/
}

.navbar {
  background-color: cornflowerblue;
}

#footer {
  min-height: 50px;
  background-color: black;
  color: rgba(255,255,255,0.87) /* MDL text white */
}

#content {
  flex: 1;        /* fill available space */
  background-color: cornsilk;
}

<nav class="navbar navbar-default navbar-fixed-top">
    <div class="col-xs-12">
        <div class="container">

            <div class="navbar-collapse collapse" id="navbar-collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="/cards">AAA</a></li> 
                    <li><a href="/cards">BBB</a></li>
                    <li><a href="/cards">CCC</a></li>
                </ul>
            </div>

        </div>
    </div>
</nav>

<div id="content"></div>

<footer id="footer">
    
    <div class="row">
        <div class="col-md4 col-xs-12">111</div>
        <div class="col-md4 col-xs-12">222</div>
        <div class="col-md4 col-xs-12">333</div>
    </div>
    
</footer>

Answer 2

您可以使用100vh高度

var unwatchBtn = element(by.css('.btn.btn-primary'));

unwatchBtn.getText().then(function(text){
console.log(text);
})

body {
    margin: 0;
}
.navbar {
    top: 0;
    left: 0;
    right: 0;
    padding: 15px;
    position: fixed;
    background: black;
    text-align: center;
}
.navbar ul {
    margin: 0;
    padding: 0;
}
.navbar ul li {
    display: inline-block;
}
.navbar ul li a {
    color: #ffffff;
    padding: 10px 25px;
    text-decoration: none;
}
/*//// content ////*/
.content {
    overflow: auto;
    background: #f8f8f8;
    margin: 48px 0 48px 0;
    height: calc(100vh - 96px);
}
.content h2 {
    margin: 0;
}
.content::-webkit-scrollbar {
    width: 8px;
    border-radius: 10px;
    background-color: #d9d9d9;
}
.content::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: gray;
}
.content::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: #d9d9d9;
}
/*//// footer ////*/
footer {
    left: 0;
    right: 0;
    bottom: 0;
    position: fixed;
    background: black;
    text-align: center;
    padding: 15px 15px;
}
footer p {
    margin: 0;
    color: #ffffff;
}

Answer 3

这是最简单的jQuery解决方案，解释在代码中：

jQuery(document).ready(function(){

var navHeight = $(".navbar").height(); // Get nav height
var footerHeight = $("#footer").height(); // get footer height
var windowHeight = $(window).height(); // get window height
var content = $("#content"); 

    content.height(windowHeight - navHeight - footerHeight); // do math
    console.log(content.height()); // for testing

// Dont forget to call it on resize also
$(window).resize(function() {
    content.height(windowHeight - navHeight - footerHeight);
});

});

jsfiddle链接：http://jsfiddle.net/dumbuv59/4/

内容最小高度100％减去可变的导航栏/页脚高度

3 个答案: