2014-01-18 2 views
0

Я чувствую, что это то, что очень просто исправить, но я просто слишком тупой, чтобы понять это, но я давно искал это в Google. По какой-то причине текстовое поле в нижней части моей страницы отключается. Я думаю, что это связано с тем, как настроен body div. Кроме того, если кто-то может сказать мне, как получить мою текстовую область того же размера, что и главный div, это было бы очень приятно. JSFiddleTextbox Cut Off

HTML

<div id="body"> 
<div id="main"> 
    <h1>Test</h1> 
    <hr /> 
    <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p> 
</div> 
    <div id="controls"><form action="#" method="POST">Enter a Comment: <br /><textarea sizable="false"></textarea><br /><input type="submit" value="submit" /></form></div> 
</div> 

CSS

#main { 
    background-color:white; 
    position:relative; 
    min-height:300px; 
    padding: 20px 20px 20px 20px; 
    border-left: 1px grey solid; 
    border-right: 1px grey solid; 
    border-bottom: 1px grey solid; 
} 
#main p { 
    font-size:20px; 
    word-wrap:break-word; 
} 
#header { 
    background-color: #C0C0C0; 
    width: 100%; 
    border-bottom: 1px solid grey; 

} 
html, body{ 
    height: 100%; 
} 
#body { 
margin-left:75px; 
margin-right:75px; 
margin-bottom:125px; 
margin-top:0; 
} 
#controls { 
    position: absolute; 
    display: inline-block; 
    width:90%; 
    height: 100px; 
    overflow: hidden; 
    z-index: 0; 
} #controls form textarea { 
    resize: false; 
    width: 100%; 
    height: 100px; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
    z-index: 0; 
} 

ответ

1

Я только что удалили это одно свойство на вкладке CSS

#controls { 
    overflow: hidden; 
} 

и это сработало! Теперь вы можете увидеть полную текстовую область.

Вот дополненная скрипку: http://jsfiddle.net/afzaal_ahmad_zeeshan/jRCy3/2/

+0

Спасибо за это, но что странно, даже если он работает на этом примере, не кажется ли работать на моей странице на самом деле. Я не понимаю, почему. –

+0

Вы тоже пытались заменить CSS? Попробуйте жестко обновить страницу браузера i.e. Нажмите CTRL + SHIFT + F5, чтобы обновить страницу и перезагрузить содержимое CSS из файла, а не кешированную службу. –

+0

Извините за поздний ответ, но я просто попробовал это, и это не помогло. Я мог бы поставить полную страницу на JSFiddle –

0

DEMO

#controls { 
     position: absolute; 
     display: inline-block; 
     width:90%; 
     height: 100px; 
       //removed 'overflow:hidden' property 
     z-index: 0; 
    }