Изменение высоты строки в бутстрапе

Question

Я работаю над сокращением высоты бутстрапа (class="table-form"). Я пробовал несколько вещей и успел только изменить ширину строки, а не высоту. До сих пор я пытался:

.table-form { 
    position: absolute; 
    width: 100%; 
    height: 70%; 
} 

.table-form { 
    position: absolute; 
    width: 100%; 
    height: 70%; 
    display: inline-block; 
} 

Как и при установке

html, body { 
    height: 100%; 
} 

По какой-то причине я только преуспевшему в изменении ширины. Как я могу успешно сократить высоту всей строки и ее содержимого, сохраняя при этом все содержимое в центре?

Вот ссылка на JS Fiddle (она может не отображаться рядный, но все содержание должно быть на одной и той же линии/строки): http://jsfiddle.net/j7z3845t/

Я был бы признателен за любые советы о том, как настроить строку/содержание высота.

Answer 1

Чтобы использовать процентную высоту, все родительские элементы должны иметь определенную высоту. В следующем CSS я добавил высоту 100% в div #container. Я также сделал цвет фона строки, в которой вы хотите изменить высоту на красный для целей тестирования. Таким образом, вы можете легко увидеть эффекты вашего CSS.

html, body { 
    height: 100%; 
} 
#container { 
    height: 100%; 
} 
body { 
    position: relative; 
    width: 100%; 
    font-family: 'Montserrat', sans-serif !important; 
    color: #CCFF66 !important; 
    background: url(blackboard.jpg) no-repeat center; 
    background-size: cover; 
    padding-left: 50px; 
    padding-right: 50px; 
    padding-bottom: 50px; 
    font-size: 1.5em !important; 
} 

.table-form { 
    position: absolute; 
    width: 100%; 
    height: 70%; 
    display: inline-block; 
    background: red; 
} 

#header { 
    padding: 30px !important; 
} 

#header h1 { 
    font-family: 'Vast Shadow', cursive !important; 
} 

#first, 
#last, 
#phone, 
#quant { /* Change error color message to red*/ 
    color: red; 
} 

h1 { 
    text-align: center; 
    font-family: 'Lobster', cursive !important; 
    font-size: 3em !important; 
} 

/* DISCOUNT TABLE */ 
#discount-table { 

} 

th { 
    font-size: 1.4em; 
} 

.table th, td { /* Table Style */ 
    text-align: center; 
    padding: 25px 15px !important; 
} 

/* DIVIDER IMAGE */ 
#divider { 
    text-align: center !important; 
} 

#divider img { 
    padding-top: 20px; 
} 

/* ORDER FORM */ 
#order-form { 

} 

.center { /* Center and condense form */ 
    margin: 0 auto; 
    height: 50%; 
    width: 70%; 
} 

label { 
    margin-bottom: 0px !important; 
} 

.form-group { 
    margin-bottom: 2px !important; 
} 

#submit-button { 
    text-align: center; 
} 

.btn { 
    background-color: #C2C2FF !important; 
} 

.btn-default:active { 
    background-color: #A3A3FF !important; 
} 

/* CUSTOM PRICE RESULT ON SUBMIT */ 

#result { 
    color: #C2C2FF !important; 
    text-align: center; 
    font-family: 'Lobster', cursive !important; 
    font-size: 3em !important; 
    letter-spacing: 6px !important; 
} 

Answer 2

Нельзя контролировать высоту на div class="table-form" путем помещения высоты непосредственно на этот элемент. Заполнение в каждом td является тем, что определяет общую высоту. Уменьшите прокладку, и вы получите меньший размер стола.

Если вы хотите сохранить высоту стола так, как вы могли бы положить overflow:scroll; стиль на div class="table-form".