Question

所以，我试图学习一些javascript和css。为了这个我分叉的som代码，并试图将它与我自己的一些想法粘贴在一起。你可以看到我的页面在我这里工作：web page for learning 我遇到了问题。我使用的是一个javascript，我分叉模拟了一个类似于界面的终端。这称为jsterm。我还在页面底部有一个框，其中包含一些共享选项和内容。我想制作这些静电＆＃39;以便jsterm仿真终端不会位于底部框下方。我应该在哪里攻击这个？我已尝试更改css中的height:值，但jsterm仍覆盖整页。

div.jsterm {
background: black;
font-family: monospace;
font-size: 16px;
color: #E0E0E0;
top:0%;
left:0%;
width: 100%;
height: 100px;
margin-bottom: 20px;
white-space: pre-wrap;
}

.share_box{
display: inline;
position:fixed;
height: 10%;
width:100%;
bottom:0%;
left:0%;
border:3px solid #a1a1a1;
background:#FFF;
padding:15px;
}

和HTML

<!doctype html>
   <html>
   <head>
     <title>Erik Sorensen</title>
      <link rel="shortcut icon" href="/images/favicon.ico">
      <meta name="description" content="Erik's webpage">
      <link type="text/css" rel="stylesheet" href="/css/style.css">
  </head>
  <body>
    <div class='cmd_box'>
       <script type="text/javascript" src="/commands/com1.js"></script>
         <script type="text/javascript" src="/config/config.js"></script>
    <script type="text/javascript" src="/js/jsterm.js"></script>
    </div>
    <div class="share_box">
    <!-- Twitter -->
    <a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="eriksor">Tweet</a>
        <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
    <!-- Google + -->
    <g:plusone size="tall"></g:plusone>    
        <script type="text/javascript">
        (function() {
            var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
            po.src = 'https://apis.google.com/js/plusone.js';
            var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
        })();
        </script>
    <!--Stackoverflow flair -->
    <a href="http://stackoverflow.com/users/2394561/eriksorensen">
        <img src="http://stackoverflow.com/users/flair/2394561.png" width="208" height="58" alt="profile for ErikSorensen at Stack Overflow, Q&amp;A for professional and enthusiast programmers" title="profile for ErikSorensen at Stack Overflow, Q&amp;A for professional and enthusiast programmers">
    </a>
</div>
</body>
  </html>

Answer 1

回答，@ jascha在某种程度上引发了我正确的方向。

margin-bottom: 20px;

将margin-bottom: 10%;更改为jsterm

Answer 2

指向eriksire的github链接。而不是eriksore。 ;）

获取滚动条和.jsterm div以符合您设置的高度尝试：

.jsterm {
    overflow-y: scroll;
}

让控制台始终位于share_box之上，使得分享框在较小的分辨率上消失：

.jsterm {
    z-index: 2;
    position: relative;
}
.share_box {
    z-index: 1;
}

在固定位置的网页上保留模拟的javascript终端窗口

2 个答案: