英文:
Weird HTML, CSS modifications to fit requirements
问题
I will only translate the non-code parts of your text as requested:
我正在开发一个网站,但是我很难将我的想法实现。我目前在页面顶部有一个包含导航栏的标题部分,在其下,我有一个居中并固定的聊天框的代码。我使用<section>
来封装聊天框。我想使聊天框的左侧和右侧成为内容区域。我希望这两个部分在滚动时保持同步,而聊天框保持固定。
因此,固定区域需要保持固定,滚动区域需要滚动,但不要让内容超过我绘制的线。我尝试创建一个内容包装器并添加填充和边距,但每当我滚动时,内容都会超出它。而且很难使左侧部分和右侧部分实际上位于左侧和右侧。
这是我的HTML和CSS代码:
<!-- 代码部分不翻译 -->
我的主要问题是如何最好地添加这两个左侧和右侧部分。我需要对当前的聊天框进行更改吗?还有如何使滚动保持在绘制的线下方。谢谢!
以上就是您要求的非代码部分的翻译。如果有其他问题,请告诉我。
英文:
I am working on a website, but I am having a hard time making my ideas come to life. I currently have a header section with a navigation bar inside of it, below that, I have code for a chat box that is centered and fixed in place. I am using <section>
to encapsulate the chat box. I want to make the left and right side of the chat box a content area. I want these two sections to scroll in sync while the chat box stays fixed.
So the fixed areas need to stay fixed, the scroll areas need to scroll but without the content going over the line I drew. I attempted to make a content wrapper and adding padding and margins but whenever I scroll, the content kept going over it. Also it was very hard to make the left section and right section actually be on the left and right.
Here is my HTML and CSS code
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
body {
background-color: #2A0944;
font-family: 'Roboto';
}
* {
margin: 0;
padding: 0;
}
i {
margin-right: 10px;
}
.chat-section {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: fixed;
width: 40%;
left: 30%;
top: 80px;
}
<!-- language: lang-html -->
<header>
<div id="navbar-animmenu">
<ul class="show-dropdown main-navbar">
<div class="hori-selector"><div class="left"></div><div class="right"></div></div>
<li>
<a href="#"><i class="fas fa-wrench"></i>&nbsp;Demo</a>
</li>
<li class="active">
<a href="#"><i class="fas fa-robot"></i>&nbsp;ChatBot</a>
</li>
<li>
<a href="#"><i class="fas fa-map-pin"></i>&nbsp;About</a>
</li>
<li>
<a href="#"><i class="fas fa-users"></i>&nbsp;Team</a>
</li>
</ul>
</div>
</header>
<body>
<section class="chat-section">
<div class="mode-selector">
<button class="mode-button" id="normal-mode">Normal Mode</button>
<button class="mode-button" id="material-mode">Material Mode</button>
</div>
<div class="chatbox">
<div class="messages-container"></div>
<div>
<div class="send-section">
<button class="clear-chat"><i class="fas fa-poo"></i></button>
<input type="text" class="message-input" placeholder="Talk with ChatBot ..."/>
<button class="send-button">Send</button>
</div>
</div>
</div>
</section>
<script src="main.js"></script>
</body>
<!-- end snippet -->
There is way more css thats for the items within the nav bar and the chatbox but I don't have issues with these.
My main question is what's the best way to approach adding these two left and right sections. Do I need to make changes to the current chatbox for this to work? Also how do I make scrolling keep the content under the drawn line. Thank you
Its mostly all explained above. Content wrapper was very annoying and not successful.
答案1
得分: 0
以下是您要翻译的内容:
"Something like this should work. It's a 3-column flexbox layout. The middle column is just a <div>
but inside it is the 'chatbox' that is set to
width: 150px;
position: sticky;
top: 0;
height: calc(100vh - 20px);
- The
width
will set the width of the column (obviously) - the
position:sticky
andtop:0px
will keep the element on screen at all times as you scroll, sticking to the top. - the
height: calc(100vh - 20px)
will make sure the element is the same height as the window. I just subtract 20px from it because of the 10px of padding added to both the top and the bottom."
body{margin:0; padding:0;}
#wrapper{
display: flex;
background: purple;
color: white;
min-height: 100vh;
}
.side{
padding: 10px;
}
#chatbox{
width: 150px;
background: #CCC;
color: black;
padding: 10px;
position: sticky;
top: 0;
height: calc(100vh - 20px);
}
<main id="wrapper">
<div class="side">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est and sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>
<div>
<div id="chatbox">
This is the chatbox
</div>
</div>
<div class="side">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo
<details>
<summary>英文:</summary>
Something like this should work. It's a 3-column flexbox layout. The middle column is just a `<div>` but inside it is the "chatbox" that is set to
```lang-css
width: 150px;
position: sticky;
top: 0;
height: calc(100vh - 20px);
- The
width
will set the width of the column (obviously) - the
position:sticky
andtop:0px
will keep the element on screen at all times as you scroll, sticking to the top. - the
height: calc(100vh - 20px)
will make sure the element is the same height as the window. I just subtract 20px from it because of the 10px of padding added to both the top and the bottom.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
body{margin:0; padding:0;}
#wrapper{
display: flex;
background: purple;
color: white;
min-height: 100vh;
}
.side{
padding: 10px;
}
#chatbox{
width: 150px;
background: #CCC;
color: black;
padding: 10px;
position: sticky;
top: 0;
height: calc(100vh - 20px);
}
<!-- language: lang-html -->
<main id="wrapper">
<div class="side">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>
<div>
<div id="chatbox">
This is the chatbox
</div>
</div>
<div class="side">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div>
</main>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论