# 避免与侧边栏重叠的最佳包裹方式是什么？

**URL:** <https://meta.discourse.org/t/best-way-to-wrap-body-to-not-overlap-sidebar/112040>\
**Category:** UX\
**Created:** [2019年三月19日 12:42 UTC](https://meta.discourse.org/t/best-way-to-wrap-body-to-not-overlap-sidebar/112040 "2019-03-19T12:42:42Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![c0ry](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/c0ry/32/134424_2.png) [@c0ry](https://meta.discourse.org/u/c0ry)\
**Post date:** [2019年三月19日 12:42 UTC](https://meta.discourse.org/t/best-way-to-wrap-body-to-not-overlap-sidebar/112040/1 "2019-03-19T12:42:42Z")

</div>

This is the product I have ATM:

[https://i.gyazo.com/3efa347fcb15e4e893a7b95778424dcc.mp4](https://i.gyazo.com/3efa347fcb15e4e893a7b95778424dcc.mp4)

I am trying to prevent the content from overlapping the side-bar.

Not sure how I can do that when I’m not able to add “non ending html tags” to one of my custom templates, then ending it on the next template.

---

<div class="post-metadata">

**Author:** ![Chaboi\_3000](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/chaboi_3000/32/163015_2.png) [@Chaboi\_3000](https://meta.discourse.org/u/Chaboi_3000)\
**Post date:** [2019年三月21日 10:45 UTC](https://meta.discourse.org/t/best-way-to-wrap-body-to-not-overlap-sidebar/112040/2 "2019-03-21T10:45:13Z")

</div>

For my 2048 theme, I make the main body compacted. It’s something like this:

> **Example Code**
>
> ```plaintext
> <div class="sidebar">
>   
> <p>Code goes here<p>
>   
> </div>
> {{plugin-outlet
> name="before-topic-list-body"
> args=(hash
> topics=topics
> selected=selected
> bulkSelectEnabled=bulkSelectEnabled
> lastVisitedTopic=lastVisitedTopic
> discoveryList=discoveryList
> hideCategory=hideCategory)
> tagName=""
> connectorTagName=""}}
> <tbody>
> {{raw "topic-list-header"
> canBulkSelect=canBulkSelect
> toggleInTitle=toggleInTitle
> hideCategory=hideCategory
> showPosters=showPosters
> showLikes=showLikes
> showOpLikes=showOpLikes
> showParticipants=showParticipants
> order=order
> ascending=ascending
> sortable=sortable
> listTitle=listTitle
> bulkSelectEnabled=bulkSelectEnabled}}
> {{#each filteredTopics as |topic|}}
> {{topic-list-item topic=topic
> bulkSelectEnabled=bulkSelectEnabled
> showTopicPostBadges=showTopicPostBadges
> hideCategory=hideCategory
> showPosters=showPosters
> showParticipants=showParticipants
> showLikes=showLikes
> showOpLikes=showOpLikes
> expandGloballyPinned=expandGloballyPinned
> expandAllPinned=expandAllPinned
> lastVisitedTopic=lastVisitedTopic
> selected=selected
> tagsForUser=tagsForUser}}
> {{raw "list/visited-line" lastVisitedTopic=lastVisitedTopic topic=topic}}
> {{/each}}
> </tbody>
> </script>
> 
> ```

> **CSS**
>
> ```plaintext
> @import "common/foundation/variables";
> 
> .sidebar {
> background: $secondary-high;
> padding: 0 ?em;
> .card {
> background: $whatever;
> height: ?px
> width: ?px;
> padding: ?em;
> margin: ?em 0;
> box-sizing: border-box;
> }
> }
> 
> table.topic-list {
> display: flex;
> }
> 
> ```