CSS для выравнивания 3 элементов макета для интерфейса чата

ProgramBox

CSS для выравнивания 3 элементов макета для интерфейса чата

Post author:admin
Запись опубликована:10 апреля, 2023
Post category:Вопросы по программированию

#html #css #layout

#HTML #css #макет

Вопрос:

макет чата

Я пытаюсь создать интерфейс чата в окне браузера, я не могу правильно настроить CSS, я пытался около 10 часов.

Ячейки # 1 и # 3 исправлены

Редактировать: # 3 также должна иметь фиксированную высоту, например, 80 пикселей; остальная высота окна будет использоваться # 2.

Ячейка № 2 (большая) в середине будет содержать строки чата, и при любом изменении размера окна полоса прокрутки должна располагаться на ней, а не на всем окне. Ячейка # 2 также должна выравнивать содержимое внизу, чтобы только 1-2 строки не находились далеко в верхней части окна.

Я смог сделать это почти идеально, используя этот CSS в ячейке # 2:

 flex-direction:column;
flex-flow: row wrap;
align-content:flex-end;

Но он не будет размещать полосы прокрутки в этой ячейке, это делает только IE.
Я думаю, что должен быть более чистый способ, потому что мой CSS выглядит уродливо, я даже пробовал с таблицами.

Вот что у меня есть сейчас, я думаю, это трудно читать

Ответ №1:

Ну, это немного старомодно, но делает то, что вы хотите:http://jsfiddle.net/runPK /

HTML:

 <div id="sidebar"></div>
<div id="primary">
    <div id="log"></div>
    <div id="composer"></div>
</div>

CSS:

 #sidebar {
    width: 200px;
    height: inherit;
    float: left;
    background-color: gray;
}
#primary {
    margin-left: 200px;
    height: inherit;
}
#log {
    height: 80%;
    background-color: silver;
    overflow: auto;
}
#composer {
    height: 20%;
    background-color: darkgray;
}

Версия 2:
Для фиксированной высоты элемента composer используйте этот CSS для #log и #composer

 #log {
    height: calc(100% - 150px);
    background-color: silver;
    overflow: auto;
}
#composer {
    height: 150px;
    background-color: darkgray;
}

http://jsfiddle.net/runPK/1/

1. Большое вам спасибо @kougiland 🙂

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

3. @adrianTNT пожалуйста, взгляните на нижнюю часть ответа. jsfiddle.net/runPK/1

4. Кажется, это помогает. Вау height: calc(100% - 150px); Я не знал об этом, мне это было нужно так много раз. Спасибо.

5. Конечно, Нико, я не хотел быть придирчивым, flex-end делает это очень хорошо, но удаляет полосу прокрутки из главного окна. Я попробую с JavaScript.

Ответ №2:

Используйте символы с плавающей точкой, чтобы все было правильно разложено. Процент высоты / ширины элементов, которые изменяются при изменении размера. Также немного javascript, чтобы сохранить текст внизу страницы.

http://jsfiddle.net/KH45Y/

HTML:

 <body>  
    <div id="left">LEFT</div>
    <div id="right">
        <div id="top">Top
            <div id="empty"></div>
            <div id="chatContent"></div>
        </div>
        <div id="bottom">
            Bottom<br/>
            <textarea id="message">Heres some default texxt.</textarea><br/>
            <button id="clickMe">Send</button>
        </div>
    </div>
</body>

CSS:

 body{
    height:500px;
}
#left{
    height:100%;
    width:20%;
    background-color:blue;
    float:left;
}
#right{
    height:100%;
    width:80%;
    float:right;
}
#top{
    overflow-y:scroll;
    background-color:red;
    height:80%;
}
#bottom{
    height:20%;
    background-color:green;
    float:bottom;
}
#chatContent{
    width:100%;
};
#empty{
    width:100%;
};

JavaScript:

 $(function(){
    $('#clickMe').click(function(event){
        $('#chatContent').append($('#message').val() "<br>");
        $('#empty').height($('#top').height()-$('#chatContent').height());
    });

});

1. Я не понимаю, как текст добавляется внизу, что делает этот JS? Это jQuery?

2. #empty div удерживает #chatContent в нижней части. Когда содержимое добавляется в #chatContent div, высота #empty div корректируется на #top.height() — #chatContent. высота().

Ответ №3:

Этого можно добиться, правильно используя символы с плавающей точкой.

Посмотрите эту скрипку:http://jsfiddle.net/4ZqzP/1 /

Информация об исправлении:http://nicolasgallagher.com/micro-clearfix-hack /

HTML:

 <div class="clearfix">
    <div class="item1">Item 1</div>
    <div class="item2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc at magna nulla. Curabitur vulputate purus sed ligula suscipit placerat.</div>
    <div class="item3">Bottom Item</div>
</div>

CSS:

 .clearfix:before,
.clearfix:after {content: ""; display: table;} 
.clearfix:after {clear: both;}
.clearfix {zoom: 1;}

.item1,
.item3{
    float: left;
}

.item1{
    width: 20%;
    background-color: magenta;
    height: 600px;
}

.item2{
    width: 80%;
    height: 400px;
    background-color: lime;
    overflow-y: scroll;
    display: table-cell;
    vertical-align: bottom;
}
.item3{
    height: 200px;
    width: 80%;
    background-color: teal;
}