Question

我正在努力解决这个问题。

我希望创建一个如下所示的布局：

private byte[] M = {
        (byte) 0x00, (byte) 0x00, (byte) 0x00, (byte) 0x00, (byte) 0x00,
        (byte) 0x00, (byte) 0x00, (byte) 0x00, (byte) 0x00, (byte) 0x00,
        (byte) 0x00, (byte) 0x00, (byte) 0x00, (byte) 0x00, (byte) 0x00,
        (byte) 0x00, (byte) 0x00, (byte) 0x00, (byte) 0x00, (byte) 0x00, //25
        (byte) 0x00, (byte) 0x00, (byte) 0x00, (byte) 0x00, (byte) 0x00,
        (byte) 0x00, (byte) 0x00, (byte) 0x00, (byte) 0x00, (byte) 0x00,
        (byte) 0x00, (byte) 0x00, (byte) 0x00, (byte) 0x00, (byte) 0x00,
        (byte) 0x00, (byte) 0x00, (byte) 0x00, (byte) 0x00, (byte) 0x00,
        (byte) 0x00, (byte) 0x00, (byte) 0x00, (byte) 0x00, (byte) 0x00, // 50
        (byte) 0x00, (byte) 0x00, (byte) 0x00, (byte) 0x00, (byte) 0x00,
        (byte) 0x00, (byte) 0x00, (byte) 0x00, (byte) 0x00, (byte) 0x00,
        (byte) 0x00, (byte) 0x00, (byte) 0x00, (byte) 0x00, (byte) 0x00,
        (byte) 0x00, (byte) 0x00, (byte) 0x00, (byte) 0x00, (byte) 0x00,
        (byte) 0x00, (byte) 0x00, (byte) 0x00, (byte) 0x00, (byte) 0x00, // 75
        (byte) 0x00, (byte) 0x00, (byte) 0x00, (byte) 0x00, (byte) 0x00,
        (byte) 0x00, (byte) 0x00, (byte) 0x00, (byte) 0x00, (byte) 0x00,
        (byte) 0x00, (byte) 0x00, (byte) 0x00, (byte) 0x00, (byte) 0x00,
        (byte) 0x00, (byte) 0x00, (byte) 0x00, (byte) 0x00, (byte) 0x00,
        (byte) 0x00, (byte) 0x00, (byte) 0x00, (byte) 0x00, (byte) 0x00, // 100
        (byte) 0x00, (byte) 0x00, (byte) 0x00, (byte) 0x00, (byte) 0x00,
        (byte) 0x00, (byte) 0x00, (byte) 0x00, (byte) 0x00, (byte) 0x00,
        (byte) 0x00, (byte) 0x00, (byte) 0x00, (byte) 0x00, (byte) 0x00,
        (byte) 0x00, (byte) 0x00, (byte) 0x00, (byte) 0x00, (byte) 0x00,
        (byte) 0x00, (byte) 0x00, (byte) 0x00, (byte) 0x00, (byte) 0x00, // 125
        (byte) 0x00, (byte) 0x00, (byte) 0x00, (byte) 0x00, (byte) 0x00,
        (byte) 0x00, (byte) 0x00, (byte) 0x00, (byte) 0x00, (byte) 0x00,
        (byte) 0x00, (byte) 0x00, (byte) 0x00, (byte) 0x00, (byte) 0x00,
        (byte) 0x00, (byte) 0x00, (byte) 0x00, (byte) 0x00, (byte) 0x00,
        (byte) 0x00, (byte) 0x00, (byte) 0x00, (byte) 0x00, (byte) 0x00, // 150
        (byte) 0x00, (byte) 0x00, (byte) 0x00, (byte) 0x00, (byte) 0x00,
        (byte) 0x00, (byte) 0x00, (byte) 0x00, (byte) 0x00, (byte) 0x00,
        (byte) 0x00, (byte) 0x00, (byte) 0x00, (byte) 0x00, (byte) 0x00,
        (byte) 0x00, (byte) 0x00, (byte) 0x00, (byte) 0x00, (byte) 0x00,
        (byte) 0x00, (byte) 0x00, (byte) 0x00, (byte) 0x00, (byte) 0x00, // 175
        (byte) 0x00, (byte) 0x00, (byte) 0x00, (byte) 0x00, (byte) 0x00,
        (byte) 0x00, (byte) 0x00, (byte) 0x00, (byte) 0x00, (byte) 0x00,
        (byte) 0x00, (byte) 0x00, (byte) 0x00, (byte) 0x00, (byte) 0x00,
        (byte) 0x00, (byte) 0x00, (byte) 0x00, (byte) 0x00, (byte) 0x00,
        (byte) 0x00, (byte) 0x00, (byte) 0x00, (byte) 0x00, (byte) 0x00, // 200
        (byte) 0x00, (byte) 0x00, (byte) 0x00, (byte) 0x00, (byte) 0x00,
        (byte) 0x00, (byte) 0x00, (byte) 0x00, (byte) 0x00, (byte) 0x00,
        (byte) 0x00, (byte) 0x00, (byte) 0x00, (byte) 0x00, (byte) 0x00,
        (byte) 0x00, (byte) 0x00, (byte) 0x00, (byte) 0x00, (byte) 0x00,
        (byte) 0x00, (byte) 0x00, (byte) 0x00, (byte) 0x00, (byte) 0x00, // 225
        (byte) 0x00, (byte) 0x00, (byte) 0x00, (byte) 0x00, (byte) 0x00,
        (byte) 0x00, (byte) 0x00, (byte) 0x00, (byte) 0x00, (byte) 0x00,
        (byte) 0x00, (byte) 0x00, (byte) 0x00, (byte) 0x00, (byte) 0x00,
        (byte) 0x00, (byte) 0x00, (byte) 0x00, (byte) 0x00, (byte) 0x00,
        (byte) 0x00, (byte) 0x00, (byte) 0x00, (byte) 0x00, (byte) 0x00, // 250
        (byte) 0x00, (byte) 0x00, (byte) 0x00, (byte) 0x00, (byte) 0x00,
        (byte) 0x00, (byte) 0x00, (byte) 0x00, (byte) 0x00, (byte) 0x00,
        (byte) 0x02 // 256
};
priv = (RSAPrivateKey) KeyBuilder.buildKey(KeyBuilder.TYPE_RSA_PRIVATE_TRANSIENT_RESET, KeyBuilder.LENGTH_RSA_2048, false);
cipher = Cipher.getInstance(Cipher.ALG_RSA_NOPAD, false);
KeyPair keyPair = new KeyPair(KeyPair.ALG_RSA, (short) priv.getSize());
keyPair.genKeyPair();
priv = (RSAPrivateKey) keyPair.getPrivate();
cipher.init(priv, Cipher.MODE_ENCRYPT);
cipher.doFinal(M, (short) 0, (short) 256, buff, (short) 0); // Encrypt hard-coded message M

当标题应该是窗口高度的60％时，2个框的高度恰好是页面的其余40％。

现在，当放大或更改分辨率时，这些框应该都是100％宽度并且内容的高度足够。

我目前使用 bootsrap ，以及以下内容：

+-------------+
|   Header    |
+-------------+
| box1 | box2 |
+-------------+

现在发生的事情是盒子没有填满所有空间，页面底部和盒子（页脚）之间存在这种难看的间距。

但是当我使用它时：

#header {
    margin  :   0 !important;
    overflow:   hidden;
    height  :   60vh;
    width   :   100%;
}

.jumbotron{
    margin  :   0px !important;
    padding :   0px !important;
}
#footer{
    width   :   100%;
    margin  :   0   !important;
    padding :   0 !important;
    border:1px solid red;
    min-height  :   40%;
    max-height:100%;

}

#main-content{
    height  :100%;
}
html,body{
    height  :   100%;
}

#boxes-wrap{
    width   :   100% !important;
    margin  :   0   !important;
    border  :   1px solid blue;
    height  :   100%;
}
.box{
    height  :   100%;
    text-align  :   center;
    padding     :   20px;
}

初始状态看起来不错，但是当更改分辨率时，框中的某些内容会超出框边界。

我该如何解决这个问题？如何使这个布局填满所有页面并使其响应？

jsfiddle：https://jsfiddle.net/yxef2huw/1/

Answer 1

Check this fiddle

我已经改变了：这些类

.jumbotron{
        margin  :   0px !important;
        padding :   0px !important;
      height:60%
    }

#footer{
    width   :   100%;
    margin  :   0   !important;
    padding :   0 !important;
    border:1px solid red;
    height  :   40%;
    max-height:100%;
  max-width:100%;

}
.box:first-child{
    background  :   red;
  float:left;
  width:50%
}

.box:last-child{
    background  :   blue;
  float:left;
  width:50%
}

希望这会有所帮助：）

100％高度布局无法正确显示

1 个答案: