Question

我的问题是，如何全屏显示选择元素（不像F11全屏，而是让它占用整个客户端浏览器屏幕空间）。我必须考虑将使用我的网站的人（一旦它在.com域名），其中一个主要的事情是我想要填充前三个元素（徽标图形，h1文本和h2文本）向上移动第一个空格，直到向下滚动。你是怎么做到的？

我试图找到解决方案，所以我尝试将填充和边距更改为正确的设置，但后来我意识到，这只适用于我的显示器/设备。有什么方法可以让它针对每个设备具体化吗？

网站链接：JLS Section 15.10.3, "Array Access Expressions"（朋友和我都在为它设计不同的设计。）

PS：我的菜单中有一张幻灯片（左起）会影响解决方案吗？

PPS：我在任何地方都找不到这篇文章，所以如果你能找到它，请给我发一个链接......

编辑：代码。

http://noclip.ga/1/

@import url(https://fonts.googleapis.com/css?family=Montserrat:700|Arvo|Josefin+Sans:600);

/* Made By NOCLIP */



body {
    background: rgb(5,6,6);
    width:100%;
    margin: auto;
}

h1 {
    font-family: Montserrat;
    font-size: 64px;
    text-align: center;
    color: #fff;
}

h2 {
    font-family: Arvo;
    font-size: 36px;
    text-align: center;
    color: #ececec;
}

h3 {
    display: inline;
    font-family: Arvo;
    font-size: 32px;
    text-align: center;
    color: #ededed;
}

#header {
    text-align: center;
    height: 300px;
    width: 100%;
}

.left {
    height: 100%;
    width: 10%0;
}

.center {
    height: 100%;
    width: 100%;
}

.textright {
    height: 100%;
    width: 100%;
}


/* Scrolling Menu */


article {
    position: fixed;
    width: 70%;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    padding: 30px 15%;
    background-color: rgb(5,5,6);
    overflow: auto;
    z-index: 0;
    -webkit-transform-origin: 0 50%;
    -moz-transform-origin: 0 50%;
    -ms-transform-origin: 0 50%;
    -o-transform-origin: 0 50%;
    transform-origin: 0 50%;
}

article:after {
    position: absolute;
    content: ' ';
    left: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    background-image: -webkit-linear-gradient(right, rgba(0,0,0,0.2) 0%, transparent 100%);
    background-image: -moz-linear-gradient(right, rgba(0,0,0,0.2) 0%, transparent 100%);
    background-image: -ms-linear-gradient(right, rgba(0,0,0,0.2) 0%, transparent 100%);
    background-image: -o-linear-gradient(right, rgba(0,0,0,0.2) 0%, transparent 100%);
    background-image: linear-gradient(right, rgba(0,0,0,0.2) 0%, transparent 100%);
    pointer-events: none;
}

nav {
    position: fixed;
    left: -16em;
    top: 0;
    bottom: 0;
    background-color: rgb(32, 40, 41);
    border-right: 50px solid rgba(6, 15, 32, 0.6);
    box-shadow: 4px 0 5px rgba(0, 0, 0, 0.2);
    z-index: 1;
    cursor: pointer;
}

nav:after {
    position: absolute;
    content: ' ';
    width: 0;
    height: 0;
    right: -70px;
    top: 50%;
    border-width: 15px 10px;
    border-style: solid;
    border-color: transparent transparent transparent rgb(72, 97, 111);
}

nav ul {
    width: 14em;
    list-style-type: none;
    margin: 0;
    padding: 1em;
}

article, article:after, nav, nav *{
    -webkit-transition: all 600ms ease;
    -moz-transition: all 600ms ease;
    -ms-transition: all 600ms ease;
    -o-transition: all 600ms ease;
    transition: all 600ms ease;
}

nav:hover {
    left: 0;
}

nav:hover ~ article {
    -webkit-transform: translateX(16em) perspective(600px) rotateY(0deg);
    -moz-transform: translateX(16em) perspective(600px) rotateY(0deg);
    -ms-transform: translateX(16em) perspective(600px) rotateY(0deg);
    -o-transform: translateX(16em) perspective(600px) rotateY(0deg);
    transform: translateX(16em) perspective(600px) rotateY(0deg);
}

nav:hover ~ article:after {
    left: 60%;
}

li a {
    font-family: Josefin Sans;
    font-size: 36px;
    color: #fff;
    text-decoration: none;
    text-transform: lowercase;
}

li a:hover {
    text-decoration: underline;
    color: #0092ff;
}

li {
    padding-top: 38%;
}

CSS：

z-index:20

Answer 1

将徽标，h1和h3文本放在div中;此div的宽度应为100vw（视口宽度），高度应为100vh（视口高度）。

public class Foo {
   public static void main( String args[] ) {
      String cake = "whatever";
      int cakeNumber = 509;
      String whyNot = "another string";
      double number = 1;

      System.out.println("\n--- Original ---");
      System.out.println("I like "+ cake +" and I eat " + cakeNumber + " blah blah     prolonging this string because " + whyNot + " and so on " + number + ".");

      System.out.println("\n--- whitespace is your friend---");
      System.out.println("I like "+ cake 
         +" and I eat " + cakeNumber 
         + " blah blah     prolonging this string because " 
         + whyNot + " and so on " 
         + number + ".");


      System.out.println("\n--- Also, look into printf ---");
      //  https://docs.oracle.com/javase/tutorial/java/data/numberformat.html
      System.out.printf("I like \"%s\" and I eat %05d blah blah"
         +"     prolonging this string because \"%s\" and so on %5.02f\n" 
         , cake 
         , cakeNumber 
         , whyNot
         , number );
   }

}

Answer 2

所有的拳头都将html和body设置为100％像：

body, html {
  height: 100%;
}

将主容器设置为100％：

.container{
     text-align:center;
     height:100%;
}

设置图像内部2个容器的高度，h1，h2将它们分成100％。我在下面的例子中使用相等的50％的高度。

.inner-div{
  height:50%;
  color:white;
}

使用以下方法使图像适合屏幕尺寸：

img {
    max-width: 100%;
    max-height: 100%;
}

这就是诀窍。你可以在这里看到结果。 https://jsfiddle.net/siddiquinoor/Lmd49qfs/

HTML：显示与浏览器视口一样大的选择元素

2 个答案: