2023年6月9日 11:41:47go评论50阅读模式

英文:

Weird HTML, CSS modifications to fit requirements

问题

I will only translate the non-code parts of your text as requested:

我正在开发一个网站，但是我很难将我的想法实现。我目前在页面顶部有一个包含导航栏的标题部分，在其下，我有一个居中并固定的聊天框的代码。我使用<section>来封装聊天框。我想使聊天框的左侧和右侧成为内容区域。我希望这两个部分在滚动时保持同步，而聊天框保持固定。

奇怪的HTML，CSS修改以满足要求

因此，固定区域需要保持固定，滚动区域需要滚动，但不要让内容超过我绘制的线。我尝试创建一个内容包装器并添加填充和边距，但每当我滚动时，内容都会超出它。而且很难使左侧部分和右侧部分实际上位于左侧和右侧。

这是我的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.

奇怪的HTML，CSS修改以满足要求

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

body {
	background-color: #2A0944;
    font-family: &#39;Roboto&#39;;
}

* {
	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;
}

&lt;header&gt;
    &lt;div id=&quot;navbar-animmenu&quot;&gt;
        &lt;ul class=&quot;show-dropdown main-navbar&quot;&gt;
            &lt;div class=&quot;hori-selector&quot;&gt;&lt;div class=&quot;left&quot;&gt;&lt;/div&gt;&lt;div class=&quot;right&quot;&gt;&lt;/div&gt;&lt;/div&gt;
            &lt;li&gt;
                &lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;fas fa-wrench&quot;&gt;&lt;/i&gt;&amp;nbsp;Demo&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class=&quot;active&quot;&gt;
                &lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;fas fa-robot&quot;&gt;&lt;/i&gt;&amp;nbsp;ChatBot&lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;
                &lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;fas fa-map-pin&quot;&gt;&lt;/i&gt;&amp;nbsp;About&lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;
                &lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;fas fa-users&quot;&gt;&lt;/i&gt;&amp;nbsp;Team&lt;/a&gt;
            &lt;/li&gt;
        &lt;/ul&gt;
    &lt;/div&gt;
&lt;/header&gt;

&lt;body&gt;
   
    &lt;section class=&quot;chat-section&quot;&gt;


        &lt;div class=&quot;mode-selector&quot;&gt;
            &lt;button class=&quot;mode-button&quot; id=&quot;normal-mode&quot;&gt;Normal Mode&lt;/button&gt;
            &lt;button class=&quot;mode-button&quot; id=&quot;material-mode&quot;&gt;Material Mode&lt;/button&gt;
        &lt;/div&gt;
    
        &lt;div class=&quot;chatbox&quot;&gt;

          &lt;div class=&quot;messages-container&quot;&gt;&lt;/div&gt;
          
          &lt;div&gt;
          &lt;div class=&quot;send-section&quot;&gt;
            &lt;button class=&quot;clear-chat&quot;&gt;&lt;i class=&quot;fas fa-poo&quot;&gt;&lt;/i&gt;&lt;/button&gt;
            &lt;input type=&quot;text&quot; class=&quot;message-input&quot; placeholder=&quot;Talk with ChatBot ...&quot;/&gt;
            &lt;button class=&quot;send-button&quot;&gt;Send&lt;/button&gt;
            &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
      &lt;/section&gt;

    &lt;script src=&quot;main.js&quot;&gt;&lt;/script&gt;
&lt;/body&gt;

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 and top: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&#39;s a 3-column flexbox layout.  The middle column is just a `&lt;div&gt;` but inside it is the &quot;chatbox&quot; 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 and top: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);
}

&lt;main id=&quot;wrapper&quot;&gt;
  &lt;div class=&quot;side&quot;&gt;
    &lt;p&gt;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&lt;/p&gt;
    &lt;p&gt;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.&lt;/p&gt;
        &lt;p&gt;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&lt;/p&gt;
    &lt;p&gt;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.&lt;/p&gt;
        &lt;p&gt;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&lt;/p&gt;
    &lt;p&gt;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.&lt;/p&gt;
  &lt;/div&gt;
  &lt;div&gt;
    &lt;div id=&quot;chatbox&quot;&gt;
      This is the chatbox
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class=&quot;side&quot;&gt;
    &lt;p&gt;Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.&lt;/p&gt;
    &lt;p&gt;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.&lt;/p&gt;
      &lt;p&gt;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&lt;/p&gt;
       &lt;p&gt;Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.&lt;/p&gt;
    &lt;p&gt;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.&lt;/p&gt;
      &lt;p&gt;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&lt;/p&gt;
       &lt;p&gt;Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.&lt;/p&gt;
    &lt;p&gt;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.&lt;/p&gt;
      &lt;p&gt;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&lt;/p&gt;
  
  &lt;/div&gt;
&lt;/main&gt;

通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。

奇怪的HTML，CSS修改以满足要求

问题

答案1

标题: 使用React和CSS创建一个无限循环的标志滑块，无需第三方库

在VSC中如何通过浏览器进行LivePreview

HTML: 使用一个字符串变量来改变文本块中的数值

使图像高于包裹的 div 并从底部开始

What's the correct way to type hint an empty list as a literal in python?

如何在Highcharts Gantt中更改本地化的星期名称

如何在同一个流中使用多个过滤器和映射函数？

如何使用Map/Set来将代码优化到O(n)？

.NET MAUI Android在GitHub Actions上构建失败，错误代码为1。

如何在Playwright视觉比较中屏蔽多个定位器？

在C++中，可以使用可变模板参数来检索类型的内部类型。

selenium.common.exceptions.StaleElementReferenceException: Message: stale element reference: stale element not found

Creating and opening a URL to log in to Website via Basic Auth with Robot Framework/Selenium (Python)

AG Grid 在上下文菜单中以大文本形式打开

发表评论