[英]FlexBox container isn't holding my div, can someone provide me an answer as to why
嗨，我正在做一个学校项目，我需要创建一个填充所有剩余宽度的画布，但是在创建 flex box 容器时，我的聊天 div 不会加入/进入 flexbox。
#Right-Box-Wrapper{ display: flex; position: fixed; width: 320px; min-width: 320px; height: 100% !important; right: 0px; top: 0px; border: 8px solid black; border-radius: 10px; background-color: #484848; } #Input-Wrapper{ display: flex; justify-content: center; } #mwrap{ width: 100%; display: flex; justify-content: center; } #message-wrapper::-webkit-scrollbar{ width: 5px; } #message-wrapper::-webkit-scrollbar-thumb{ background: black; border-radius: 5px; } #message-wrapper::-webkit-scrollbar-track{ background: rgb(85, 85, 85); border-radius: 5px; } #message-wrapper{ top: 12px; position: absolute; height: 80%; width: 95%; background-color: #333333; border: 3px solid black; overflow: auto; overflow-wrap: break-word; } #a{ position: fixed; height: 100%; width: 10px; background-color: #262626; top: 0px; right: 0px; } #inpbox{ background-color: #333333; position: absolute; width: 95%; height: 50%; top: 80px; text-align: left; color: whitesmoke; border: 3px black solid; font-family: sans-serif; font-size: 13px; resize: none; } #inpbox::-webkit-scrollbar{ width: 5px; } #inpbox::-webkit-scrollbar-thumb{ background: black; border-radius: 5px; } #inpbox::-webkit-scrollbar-track{ background: rgb(85, 85, 85); border-radius: 5px; } #inpbox:focus{ outline: none; } #Chat-Wrapper{ position: absolute; bottom: 0px; right: 0px; z-index: 50; width: 100%; height: 25%; } .Inputs{ color: whitesmoke; padding-top: 8px; padding-bottom:8px; padding-right: 3px; padding-left: 3px; border-top: black solid 2px; border-bottom: black solid 2px; font-family: sans-serif; } .Tlc{ color:red; font-weight: 1000; padding-top: 8px; padding-bottom:8px; padding-right: 3px; padding-left: 3px; border-top: black solid 2px; border-bottom: black solid 2px; font-family: sans-serif; } .dice_roll{ color:greenyellow; font-weight: 1250; padding-top: 8px; padding-bottom:8px; padding-right: 3px; padding-left: 3px; border-top:greenyellow solid 2px; border-bottom: greenyellow solid 2px; font-family: sans-serif; } #canvas-wrapper{ justify-content: center; display: flex; min-width: 350px; height: 400px; background-color: rgb(112, 112, 78); } #screen-wrap{ display: flex; flex-direction: row; } body{ height: 100%; width: 100%; overflow: hidden; margin: 0px; } #flxt{ display: flex; flex-direction: row; } <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="site.css"> <script src="/socket.io/socket.io.js"></script> </head> <body> <div id = "screen-wrap"> <div id = "canvas-wrapper"> <canvas id = "canv"> </canvas> </div> <div style="background-color: aqua;width: 100px;height: 100px;"> <canvas id = "canv"> </canvas> </div> <div id = "Right-Box-Wrapper"> <div id = "mwrap"> <div id = "message-wrapper"> </div> </div> <div id = "Chat-Wrapper"> <div id = "Input-Wrapper"> <textarea placeholder="Type here...." id = "inpbox"></textarea> </div> </div> </div> </div> <div id = "flxt"> <div style="padding: 10px;background-color: aqua;"> asdasdasd </div> <div style="padding: 10px;background-color: aqua;"> asdasdasdasdasd </div> </div> <script src="site.js"></script> </body> </html>我不知道这有什么问题，但这是我第一次使用 flex box 我找不到其他有类似问题的人
从我所看到的，你有很多定位在使用 flexbox 时有些不需要。 我给你一个基本的例子。 首先，我将所有对象设置为 box sizing border-box 以在使用百分比时提供帮助。 将您的容器放置在固定位置并将其放在右上角（您已经完成了）。 使其显示 flex 并为其指定列的 flex 方向，以便对象堆叠在彼此的顶部。 给它一个高度和宽度。 我使用 vh（视口高度）和 vw（视口宽度）。 接下来，您的消息区域将有一个名为 flex-grow 的属性，该属性设置为 1。这允许它占用所有剩余的可用空间。 接下来将聊天容器的高度设置为 25 视口高度。 这意味着您的消息区域将占据视口高度的 25% 以外的所有区域。 然后我只是将聊天文本区域的高度和宽度设置为 100%，因为它现在使用边框框大小，它只会填充容器。
Flexbox 和 Grid 可以帮助您定位对象，同时将它们保持在文档流中，因此在尝试移动对象时使用绝对位置时要小心。 这是一个非常好的 flexbox 指南： https ://css-tricks.com/snippets/css/a-guide-to-flexbox/ 这里有更多关于定位的信息。 仔细看看绝对如何将对象移出文档的正常流程https://developer.mozilla.org/en-US/docs/Web/CSS/position
* { box-sizing: border-box; } .chat-container { position: fixed; right: 0; top: 0; display: flex; flex-direction: column; height: 100vh; width: 40vh; } .message { flex-grow: 1; background-color: #808080; border: 4px solid #000; border-bottom: 2px solid #000; border-radius: 10px 10px 0 0; } .chat { height: 25vh; border: 4px solid #000; border-top: 2px solid #000; border-radius: 0 0 10px 10px; } .chat-area { width: 100%; height: 100%; background-color: #808080; border-radius: 0 0 5px 5px; } ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */ color: #fff; opacity: 1; /* Firefox */ } :-ms-input-placeholder { /* Internet Explorer 10-11 */ color: #fff; } ::-ms-input-placeholder { /* Microsoft Edge */ color: #fff; }
<div class="chat-container"> <div class="message"></div> <div class="chat"> <textarea placeholder="input message here" class="chat-area"></textarea> </div> </div>
如果第一个答案没有帮助，我将举例说明如何使用 flexbox 定位对象。 这使对象保持在文档流中，并使用显示 flex、flex 方向和 flex 增长来操纵它们的位置。
body { margin: 0; padding: 0; } .wrapper { display: flex; height: 100vh; width: 100vw; } .remaining-area { flex-grow: 1; background-color: #f2f2f2; } .chat-area { width: 30vw; height: 100vh; display: flex; flex-direction: column; } .message { flex-grow: 1; background-color: #ccc; } .chat { height: 25vh; }
<div class="wrapper"> <div class="remaining-area"> <p>this area is left empty</p> </div> <div class="chat-area"> <div class="message"> <p>message area</p> </div> <div class="chat"> <p>chat area</p> </div> </div> </div>
有人可以帮我解决为什么我的 javascript 对象没有被创建吗？
[英]Can someone help me out with why my object in javascript isn't being created?
有人能告诉我为什么当我的链接下面有一个 div 时我的链接不可点击吗？
[英]Can someone tell me why my links aren't clickable when I have a div under it?
有人介意帮助我理解为什么我的函数没有产生正确的结果吗？
[英]Would someone mind helping me understand why my function isn't producing correct results?
有人能告诉我为什么 .checked 函数没有在 javascript 中触发吗？
[英]Can someone tell me why .checked function isn't firing in javascript?
谁能告诉我为什么这个JavaScript代码没有按顺序排列一个数组？
[英]Can someone tell me why this JavaScript code isn't lining up an array in order?
请有人帮我理解为什么图像没有显示在屏幕上？
[英]Please can someone help me to understand why the image isn't showing on the screen?
有人可以向我解释为什么这行不通吗？ HTML上的Ajax加载+脚本
[英]Can someone explain to me why this isn't working? Ajax Load + scripts on html
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.