Question

这是我一直致力于的项目。每次我完成它，我删除一切，然后重新开始。问题是，我似乎无法在不至少卡住一次的情况下这样做。

当前问题：是什么导致文本区域与顶层菜单重叠而不是填充空间？

/* --------- * --------- */

    body, html {

    }

/* --------- MENU --------- */

    #menu {
        height: 50px;
        width: 100%; 
        background-color: #EBE9EB; 
        box-shadow: 1px 1px 1px #000000;
    }




/* --------- LOGO --------- */

    #logo {
        float: left;
        font-weight: bold; 
        margin-left: 15px; 
        font-size: 20px; 
        height: 20px;
        text-shadow: 1px 2px #000000; 
        color: #9d9d9a;
        position: relative; 
        top: 12px; 
    }

/* --------- BUTTON --------- */

    #button {
        float: right;
        width: 50px;
        height: 30;
        background-color: #7E7E7E; 
        position: relative;
        top: 12px;
        right: 15px;  
        font-family: helvetica; 

    }



/* --------- TOGGLE --------- */

    .toggle {
        height: 35px;
        width: 348.9px;
        list-style: none; 
        font-weight: bold; 
        font-family: helvetica; 
        position: relative; 
        margin: 0 auto; 
        top: 7px; 
        border: 1px solid black;
        border-radius: 5px; 
        line-height: 35px; 
    }

/* --------- LI --------- */

    .toggle li {
        float: left; 
        padding-left: 30px; 
        padding-right: 30px; 
        text-align: center; 
        line-height: 35px; 
        border-right: 1px solid black;


    }

    #resultLi {
        border-right: none;

    }

    #htmlLi {
        margin-left: -40px; 

    }

/* --------- SELECTED --------- */

    .selected {
        background-color: #7E7E7E; 

    }

/* --------- CONTAINERS --------- */

    #CSSContainer, #JSContainer {
        display: none;
    }

    .codeContainer {
        height: 100%;
        width: 50%;
        padding: 0; 
        margin: 0; 
        float: left; 
        position: relative;


    }

    .codeContainer textarea {
        height: 100%;
        width: 100%; 
        position: relative; 
    }



</style>

 <div id="menu">

    <div id="logo">Codeplayer</div>

    <button id="button">Run</button>

    <ul class="toggle">
        <li id="htmlLi" class="selected">HTML</li>
        <li>CSS</li>
        <li>JS</li>
        <li id="resultLi" class="selected">Result</li>

    </ul>

    <div class="clear"></div>


    <div class="codeContainer" id="HTMLContainer">
        <textarea>HTML Container</textarea>
    </div>
 <!-- 
    <div class="codeContainer" id="CSSContainer">
        <textarea>HTML Container</textarea>
    </div>

    <div class="codeContainer" id="JSContainer">
        <textarea>HTML Container</textarea>
    </div> -->

<!--         <iframe>Result</iframe>
-->



</div>


<script>

    var windowHeight = $(window).height(); 
    var menuHeight = $("#menu").height(); 
    var containerHeight = windowHeight-menuHeight; 
    $(".codeContainer").height(containerHeight+"px"); 


</script>

Answer 1

您可以将.codeContainer中的css更改为显示块。

它是重叠的，因为它是浮动的并从页面的正常流程中取出。

Answer 2

菜单div上有一个固定的高度，textarea容器是浮动的，你已经移动了toggle div。

从#menu中删除高度，在#menu上使用填充而不是.toggle上的相对定位，从.codeContainer中删除浮动。

那应该能得到你想要的东西

Answer 3

http://jsfiddle.net/utsavoza/o1yer0vm/

在您的类codeContainer中添加一个属性

padding-top:14px;

是什么导致文本区域向上推，而不是在我的菜单底部对齐？

3 个答案: