Submit Button not Full Height of Container

Question

Я пытаюсь сделать кнопку отправки заполнить всю высоту контейнера, используя код ниже, однако это не так.

.container { 
 
    border: 1px solid; 
 
} 
 
.test { 
 
    height: 100%; 
 
}

<div class="container"> 
 

 
    <div style="float: right;"> 
 
    <form method="post"> 
 
     <input class="test" type="submit"> 
 
    </form> 
 
    </div> 
 

 
    <div style="float: left; width: 95%;"> 
 
    <p>Hello! This is an example... by the way, I'm from outer space!</p> 
 
    </div> 
 

 
    <div style="clear: both;"></div> 
 

 
</div>

JsFiddle: https://jsfiddle.net/3apqb869/1/

Answer 1

Мне нравится использовать Flexbox для вещей, как это. До тех пор, пока вы в порядке со снижением поддержки IE < = 10, это упрощает стилизацию таких вещей. Есть также полисы для него, если вы этого не делаете.

https://jsfiddle.net/3apqb869/3/

.container { 
    display: flex; 
    //implicit flex-direction: row; 
} 

.right { 
    display: flex; 
    flex-direction: column; 
} 

Here's a great guide to flexbox.

Answer 2

Использование position для этих случаев (поддерживает IE 7, а, как Flexbox не поддерживается):

.container { 
 
    border: 1px solid; 
 
    position: relative; 
 
    padding-right: 70px; 
 
} 
 
.test { 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    right: 0; 
 
    height: 100%; 
 
    width: 65px; 
 
}

<div class="container"> 
 

 
    <div> 
 
    <form method="post"> 
 
     <input class="test" type="submit"> 
 
    </form> 
 
    </div> 
 

 
    <div style="float: left; width: 95%;"> 
 
    <p>Hello! This is an example... by the way, I'm from outer space! Hello! This is an example... by the way, I'm from outer space! Hello! This is an example... by the way, I'm from outer space!</p> 
 
    <p>Hello! This is an example... by the way, I'm from outer space! Hello! This is an example... by the way, I'm from outer space! Hello! This is an example... by the way, I'm from outer space!</p> 
 
    <p>Hello! This is an example... by the way, I'm from outer space! Hello! This is an example... by the way, I'm from outer space! Hello! This is an example... by the way, I'm from outer space!</p> 
 
    <p>Hello! This is an example... by the way, I'm from outer space! Hello! This is an example... by the way, I'm from outer space! Hello! This is an example... by the way, I'm from outer space!</p> 
 
    </div> 
 

 
    <div style="clear: both;"></div> 
 

 
</div>

Просмотр

Answer 3

Вы можете использовать display: table в сочетании с table-cell для достижения требуемого поведения [кнопку Отправить потребует абсолютное позиционирование и ширина должна быть установлена ​​ так, чтобы текст кнопки не переполнить и оборваны].

Плюсы:

display:table и display:table-cell имеет прочную опору в современном, а также классический браузер (я бы не сказал старый)

Минусы: Человек, который вниз проголосовали должен комментировали на том.

.container { 
 
    background: #fff; 
 
    display: table; 
 
    width:100%; 
 
} 
 

 
.container >div { 
 
    display: table-cell; 
 
} 
 

 
.submit-wrapper { 
 
    position: relative; 
 
    width:100px; 
 
} 
 

 
.test { 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
}

<div class="container"> 
 
    <div > 
 
    <p>Hello! This is an example... by the way, I'm from outer space! I'm from outer space!</p> 
 
    </div> 
 
    <div class="submit-wrapper"> 
 
    <form method="post"> 
 
     <input class="test" type="submit"> 
 
    </form> 
 
    </div> 
 
</div>

https://jsfiddle.net/3apqb869/10/