Липкий нижний колонтитул + высота текстовой области в процентах

Question

Липкий нижний колонтитул + высота текстовой области в процентах

4

У меня есть страница с липким нижним колонтитулом. На странице находится кнопка textarea + a submit. Я хочу, чтобы высота textarea настраивалась на высоту окна браузера, а кнопка всегда была прямо под текстовым полем, почти касаясь нижнего колонтитула.

Здесь моя скрипка: http://jsfiddle.net/7r8zK/3/. Код:

<!-- Part 1: Wrap all page content here -->
<div id="wrap">
    <!-- Begin page content -->
    <div class="container">
        <div class="page-header">
             <h1>
        Header
      </h1>

        </div>
    </div>

    <form>
        <fieldset>
            <textarea>Hello, world</textarea>
            <label class="checkbox">
                <input type="checkbox" />Check me out</label>
            <button type="submit" class="btn">Submit</button>
        </fieldset>
    </form>

    <div id="push"></div>
</div>
<div id="footer">
    <div class="container">
        <p>Footer</p>
    </div>
</div>

Я не уверен, что делать с формой, чтобы высота textarea регулировалась в соответствии с высотой окна. Можно ли это сделать только с CSS (без JS)?

StackOverflowNewbie 13 нояб. 2013, в 13:21

Источник

0

Почему бы вам не использовать absolute позицию для нижнего колонтитула, он никогда не появится или коллоидная проверка, более того, я не уверен, что это ваша потребность, поэтому только комментирую здесь ..
Vivek Vikranth 13 нояб. 2013, в 13:31
0

Предоставленный вами jsfiddle не показывает высоту текстовой области, подгоняемой к высоте окна.
StackOverflowNewbie 13 нояб. 2013, в 15:29

Теги:

twitter-bootstrap

css

css3

8 ответов

Ещё вопросы

Почему бы вам не использовать absolute позицию для нижнего колонтитула, он никогда не появится или коллоидная проверка, более того, я не уверен, что это ваша потребность, поэтому только комментирую здесь ..
Предоставленный вами jsfiddle не показывает высоту текстовой области, подгоняемой к высоте окна.

apaul · Answer 1 · 2013-11-24T04-03-00.000Z

Если я понимаю, что вы после, вы можете использовать css calc() так:

Рабочий пример

html, body {
    height: 100%;
}
#wrap {
    height:100%;
    max-height:100%;
    margin: 0 auto;
}
#footer {
    height: 40px;
}
form {
    min-height:100px;
    height: calc(100% - 180px);
}
fieldset, textarea {
    height: calc(100% - 40px);
}

Я также удалил <div id="push"></div> из html, поскольку он, похоже, не служил какой-либо цели...

brouxhaha · Answer 2 · 2013-11-19T00-37-00.000Z

Проблема, с которой вы работаете, заключается в необходимости учитывать высоту заголовка, кнопки и флажка. Я могу видеть, как это работает, если вы можете использовать height: calc(100% - footer height - header height - vertical margins) в форме и height: calc(100% - button height - checkbox height - vertical margins) в текстовом поле.

В этом случае вам нужно знать или задавать высоту и поля для этих элементов. Я также добавил box-sizing: border-box; ко всем элементам, чтобы учитывать отступы при вычислении размера. Вам нужно будет учитывать вертикальные поля в ваших расчетах.

Проверьте это: DEMO, используя липкий нижний колонтитул http://css-tricks.com/snippets/css/sticky-footer/

Я также удалил push div из html.

* {
    margin: 0;
    box-sizing: border-box;
}
 html, body {
    height: 100%;
    /* The html and body elements cannot have any padding or margin. */
}
#wrap {
    height:100%;
    margin: 0;
}
#wrap {
  min-height: 100%;
  /* equal to footer height */
  margin-bottom: -100px; 
}
#wrap:after {
  content: "";
  display: block;
}
#footer, #wrap:after {
  /* .push must be the same height as footer */
  height: 100px; 
}
#footer {
    background: #999999;
}
#wrap > .container {
    height: 100px;
    background: #ccc;
}

.btn, .check-box {
    height: 20px;
}

#wrap form {
    height: calc(100% - 200px); /* 200px = height of header and footer */
}
#wrap form > fieldset {
    height: 100%;
}
#wrap > form > fieldset > textarea {
    height: calc(100% - 55px); /* 55px = height of .btn and .checkbox, vertical margin of .checkbox and textarea */
}

alias51 · Answer 3 · 2013-11-25T19-23-00.000Z

Предполагая, что вы запрашиваете отзывчивое текстовое поле, которое заполняет высоту окна, оно на самом деле довольно просто.

Сначала установите текстовое поле в положение: абсолютное, а затем смещение сверху и снизу по высоте верхнего и нижнего колонтитула (+ checkbox/submit). Это обеспечит пропорциональное масштабирование.

Затем установите свой флажок и нижний колонтитул как абсолютное смещение снизу, и все готово.

http://jsfiddle.net/7r8zK/101/

<form>
    <fieldset>
        <textarea id="textarea">Hello, world</textarea>
        <div id="inputs">
        <label class="checkbox">
            <input type="checkbox" />Check me out</label>
        <button type="submit" class="btn">Submit</button>
        </div>
    </fieldset>
</form>

#textarea {

    position:absolute;
    top:100px;
    bottom:120px;
}

#inputs {
    position:absolute;
    bottom:50px;

}

nkmol · Answer 4 · 2013-11-25T14-23-00.000Z

Позвольте мне рассказать ваш вопрос на простом английском языке; Вы хотите, чтобы нижний колонтитул всегда находился в нижней части экрана. Где вы хотите, чтобы ваша текстовая область заполнила оставшееся пространство формы.

Позвольте мне рассказать о нем немного более "язык макета"; Вы хотите, чтобы нижний колонтитул был внизу, как статический элемент. Где нижний колонтитул имеет статическую высоту. Вы хотите, чтобы заголовок всегда находился наверху, где заголовок имеет автоматическую высоту, основываясь на содержании.
Вы хотите, чтобы ваша форма заполнила оставшееся пространство. Где текстовое поле формы заполняет оставшееся пространство формы.

Создать макет таблицы

Основная задача для этого состоит в том, что один элемент имеет неизвестную высоту (заголовок). Один из способов, который я могу придумать, - использовать таблицу-макет. Если ваши разные разделы (заголовок, форма и нижний колонтитул) представляют разные таблицы-строки:

Html

<div class="header">
   ...
</div>
<div id="content">
   ...
</div>
<div id="footer">
   ...  
</div>

Css

body > div {
    display: table-row;
}

A direct child selector используется для преобразования всех элементов div, которые являются прямым дочерним элементом тела (#header, #content и #footer) в строку таблицы.

Где ваше тело будет действовать как таблица:

body 
{
    display: table;
    width: 100%;
    box-sizing: border-box;
}

box-sizing используется, потому что bootstrap использует прописку на теле. Это предотвращает расширение тела, когда наложение назначается телу.

Получить оставшееся пространство

Теперь вы хотите, чтобы #content (который содержит форму) заполнил оставшуюся высоту. Поскольку вы использовали макет таблицы, вы можете использовать:

#content {
    height: 100%;
}

Это автоматически и динамически заполняет оставшееся пространство.

Примечание о html кнопки
Элемент <button> не поддерживает атрибут type=submit, вы хотите использовать <input>, если вы хотите использовать этот атрибут. Или вы можете просто удалить атрибут и использовать элемент <button>.

Второй макет таблицы

Поскольку основной объект является одинаковым для высоты textarea, вы можете создать другой макет таблицы внутри другого макета таблицы:

<div id="content">
    <form>
        <fieldset>
            <table id="formTable">
                <tr>
                    <td><textarea>Hello, world</textarea></td>
                </tr>
                <tr>
                    <td>
                        <label class="checkbox">
                            <input type="checkbox" />Check me out
                        </label>
                    </td>
                </tr>
                <tr>
                     <td>
                         <input type="submit" class="btn" />
                    </td>
                </tr>
            </table>
        </fieldset>
    </form>
</div>

Обратите внимание, что для этого я использовал простые теги таблицы html. Вы могли бы использовать эти элементы для предыдущего макета таблицы. Но это зависит от того, хотите ли вы html, который у вас есть сейчас.

jsFiddle

С полными табличными тегами

Обратите внимание, что я использовал min-height: 300px; на теле, чтобы элементы не перекрывали друг друга со слишком маленьким экраном. Если вы хотите поддержать это, вы можете просто использовать новый медиа-запрос, чтобы решить эту проблему.

дополнительная информация, почему этот подход
Этот подход не использует никаких исправлений или ручных вычислений. Вы будете работать со столом, поскольку он должен работать.

Также calc() не поддерживается широко, где в качестве элемента таблицы есть базовая константа HTML: http://caniuse.com/calc

Не стесняйтесь задавать вопрос об этом подходе.

ProllyGeek · Answer 5 · 2013-11-24T03-18-00.000Z

из того, что я понимаю, вы хотите настроить текстовое поле на основе введенных данных, но вы не хотите, чтобы высота превышала высоту окна, до тех пор, пока она не будет точно выше кнопки нижнего колонтитула, если это правильно, то я использовал код здесь:

https://raw.github.com/jackmoore/autosize/master/jquery.autosize.min.js

вместе с настройкой максимальной высоты на 180% (это можно отрегулировать в соответствии с экраном, на котором вы используете причину im, используя экран моего ноутбука)

проверьте скрипту здесь:

    textarea
{
    max-height:180%;
}

http://jsfiddle.net/7r8zK/89/

Lakshmi Prasanna · Answer 6 · 2013-11-22T12-55-00.000Z

Отметьте эту скрипту за свой ответ. Fiddle Here..

var height = window.innerHeight;
$(document).ready(function ()
{
    var eheight = $(".page-header").height();
    $("#txt").css("height",height - eheight -90);// Here 90 resembles the height of checkbox, button and footer..
});

UD'esign · Answer 7 · 2013-11-22T07-52-00.000Z

Вы дали 40px от высоты до нижнего колонтитула DIV, так что вам нужно применить маржу, свойства прокладки внутри нижнего колонтитула P Tag до значения 0 или увеличить высоту нижнего колонтитула, в соответствии с тем, что я упомянул CSS (без изменений в вашем HTML).

Вот мой CSS:

html, body {
  height: 100%; 
  font-size: 14px;
  line-height: 20px;
  margin: 0;
  padding:0;
 /* The html and body elements cannot have any padding or margin. */
}

#wrap {
  height: auto !important;
  height:100%;
  margin: 0 auto -40px;
  min-height: 100%;
  position:relative;    
}

.container:after {
  clear: both;
}
.container:before, .container:after {
  content: "";
   display: table;
  line-height: 0;
}
#push, #footer {
 height: 40px;
}

fieldset { height:85%; width:98%; margin:0; padding:0; position:absolute;  }
textarea {  width:96%; height:86%; margin:1%; }

#footer{ background:#f2f2f2; }
#footer p { margin:0; padding:0;}

Yagiz Ozturk · Answer 8 · 2013-11-19T01-22-00.000Z

Извините за встроенный код, но это работает.

        </div>
    </div>

    <form>
        <fieldset>
            <textarea style="height:100%;width:100%" cols="100%" rows="100%">Hello, world</textarea>
            <label class="checkbox">
                <input type="checkbox" />Check me out</label>
            <button type="submit" class="btn" style="float:right;">Submit</button>
        </fieldset>
    </form>

    <div id="push"></div>
</div>
<div id="footer">
    <div class="container">
        <p>Footer</p>
    </div>
</div>


#wrap {margin: 0 auto -40px;}
#push, #footer {height: 40px;}