Текстовое поле отрезано

0

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

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;
} 
Теги:

2 ответа

1
Лучший ответ

Я просто удалил это свойство со вкладки CSS

#controls {
  overflow: hidden;
}

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

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

  • 0
    Спасибо вам за это, но странно то, что, несмотря на то, что он работает на этом примере, он не работает на моей странице. Я не понимаю почему.
  • 0
    Вы тоже пытались заменить CSS там? Попробуйте обновить страницу браузера, то есть нажмите сочетание клавиш CTRL + SHIFT + F5, чтобы обновить страницу и перезагрузить содержимое CSS из файла, а не из кэшированной службы.
Показать ещё 2 комментария
0

DEMO

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

Ещё вопросы

Сообщество Overcoder
Наверх
Меню