Bootstrap 3 - Row Исправлена ​​ошибка

Question

Я борюсь с системой сетки Bootstrap 3. Позвольте мне объяснить, что я реализовал, что мне нужно и что я сделал (неудачная попытка) достичь.

Это макет (HTML | Razor) изображения.Для вас, чтобы иметь живую версию этого Это ссылка сайта на этот экран, чтобы вы могли видеть его и играть.

    <div class="row">
    <div class="col-xs-12 col-md-6 nopadding">
            <div id="showcaseSection" class="showcaseSection superVideo">
                <ul class="media-list" id="showcaseMedia" itemscope itemtype="http://schema.org/UserComments"></ul>
            </div>


        <div class="hidden-xs">
            <div class="col-xs-6 nopadding">
                <p class="text-center no-margin" style="margin-top: 15px;">
                    <span>Equipo: @Model.Team1Name (<span id="team1Total">0</span>)</span>
                </p>
                <ul class="media-list team1ListShowCase" id="@Model.Team1Id" data-img="@Url.Action("GetLinkToImageTeam", "Home", new {Id = Model.Team1Id})" data-media="media-left" data-team="@Model.Team1Name" data-class="team1"></ul>
            </div>
            <div class="col-xs-6 nopadding">
                <p class="text-center no-margin" style="margin-top: 15px;">
                    <span>Equipo: @Model.Team2Name (<span id="team2Total">0</span>)</span>
                </p>
                <ul class="media-list team2ListShowCase" id="@Model.Team2Id" data-img="@Url.Action("GetLinkToImageTeam", "Home", new {Id = Model.Team2Id})" data-media="media-right" data-team="@Model.Team2Name" data-class="team2"></ul>

            </div>
        </div>
    </div>


    <div class="col-xs-12 col-md-6">
       <div class="col-xs-12 col-md-6 nopadding">

    <div id="chatcontainer">
        <ul class="media-list" id="chatbody" itemscope itemtype="http://schema.org/UserComments"></ul>

        <div id="chatOptions" class="collapse">
            <p class="text-center">@Model.Title</p>
            <button id="exitroom" class="btn btn-danger" title="Salir" disabled="disabled">
                <span class="glyphicon glyphicon-log-out"></span> @Resources.Salir
            </button>
            <span>
                <input type="checkbox" id="isAutoscroll" name="my-checkbox" checked>
                <label>Actualizar Mensajes</label>
            </span>
        </div>
    </div>
    @if (!Model.IsReadOnly)
    {
        <div class="input-group">
            <input type="hidden" style="display: none" class="form-control" aria-required="false" readonly id="inresponseto">
            <textarea type="text" rows="2" class="form-control" required="required" aria-required="true" maxlength="500" placeholder="Comentario..." disabled="disabled" id="responseText"></textarea>
            <input type="text" class="form-control" style="height: 25px;" aria-required="false" readonly id="inresponsetomessage">
            <span class="input-group-btn">
                <button id="sendresponse" type="button" title="Enviar" class="btn btn-primary" disabled="disabled">
                    <span class="glyphicon glyphicon-send"></span>
                </button>
                <button class="btn btn-info" data-toggle="collapse" title="Opciones" data-target="#chatOptions">
                    <span class="fa fa-cogs"></span>
                </button>
            </span>
        </div>
    }
</div>
</div>

Как вы видите, все водна строка. Я хочу, чтобы Видео Секция была зафиксирована сверху и ТЕКСТОВАЯ ОБЛАСТЬ, чтобы комментировать фиксированную НИЖНЮЮ в XS (области просмотра).

Iпопытался добавить это в строку, но я исправляю видео, но я не вижу ТЕКСТОВОЙ ОБЛАСТИ

.fixed2 {
position: fixed;
z-index: 10;
width: 100%;}

Я не знаю, что еще сделать, чтобы показать фиксированный верх (видео) и нижний фиксированный (текстовое поле чата)) и прокручиваемые комментарии в середине, когда в XS.

Любая помощь приветствуется.

Answer 1

Переопределение высоты для #chatcontainer для планшета / мобильного телефона решит проблему.Пример:

@media(max-width: 767px) {  
  #chatcontainer{
    height: calc(50vh - 80px);
  } 
}