Question

我一直试图将我的代码放在Codepen上，但出于某种原因，＃left div背景并没有显示出来。然而，它在当地工作正常。我尝试过使用图片网址，背景颜色和所有东西来修复它，但到目前为止还没有任何工作。任何帮助将不胜感激！

只有#left div应该具有背景颜色。以下是代码和here's the codepen.

的index.html

<link rel="stylesheet" href="style.css"/>
<script src="index.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<body>
  <div id="left">
  <form id="formBox">
    <textarea id="input" placeholder="Enter your LispyHTML"></textarea>
    <input id="renderButton" type="button" onclick="render()" value="Render!">
  </form>
</div>
    <div id="right">
  <div id="target">
  </div>
    </div>
</body>

的style.css：

@import url('https://fonts.googleapis.com/css?family=Open+Sans');

html, body {
  margin: 0;
  padding: 0;
  border: 0px;
}

body{
    font-family: 'Open Sans';
}

#left{
    width: 50%;
    height: 100%;
    float: left;
  background: #000000 !important;
    /*background: linear-gradient(to right, #c2e59c, #64b3f4);       */
}

#right{
    width: 50%;
    height: 100%;
    float: right;
}

#formBox{
    position: absolute;
    width:40vw;
    height:240px;
    background-color: #fff;
    margin:auto;
    border-radius: 5px;
    padding:10px;
    left:20%;
    top:50%;
    margin-left:-17%;
    margin-top:-200px;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}
#target{
    height: 100%;
    float: left;
}

#input{
    height: 100%;
    width: 100%;
    left: 500px;
    margin: auto;
    border-style: none; 
    border-color: Transparent; 
    overflow: auto; 
    resize: none;
    outline: none;
    display:inline-block

}

#renderButton {
    position: absolute;
    top: 280px;
    left: 37%;
    background-color:#9C27B0;
    border-radius:10px;
    border:1px solid #9C27B0;
    display:inline-block;
    cursor:pointer;
    color:#ffffff;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    font-size:17px;
    padding:10px 20px;
    text-decoration:none;
    text-shadow:0px 1px 0px #2f6627;
    outline: none;
}
#renderButton:hover {
    background-color:#7B1FA2;
    border: none;
}

Answer 1

您需要将高度100％更改为100vh

#left{
    width: 50%;
    height: 100vh;
    float: left;
    background: #000000 !important;
    /*background: linear-gradient(to right, #c2e59c, #64b3f4);       */
}

或

#formBox更改位置：relative和margin-top：0px

CSS背景不适用于Codepen

1 个答案: