Блог

Главная - Вопросы по программированию - Div, превышающее ширину экрана

Div, превышающее ширину экрана

#css #width #overflow

Вопрос:

Добрый день, друзья, я работаю над своей навигационной панелью с акцентом на раздел «Корзина», но по какой-то причине он превышает общую ширину экрана. Я хотел бы устранить эту проблему по очевидным причинам.

Проблема возникает, когда вы уменьшаете размер экрана, примерно примерно на размер экрана мобильного устройства.

Вот ссылка на codesnippet:

https://codepen.io/SanderPNL98/pen/poPqoVE

StackOverflow предупреждает меня, что я должен поделиться своим кодом также в этой теме, так что поехали.

HTML:

 <div data-v-91ac6b5c="" class="p-overlaypanel p-component" id="overlay_panel" style="transform-origin: center top; top: 42px; left: 0px; --overlayArrowLeft:423.516px; z-index: 1004;">
   <div class="p-overlaypanel-content">
      <li data-v-91ac6b5c="" class="list-group-item d-flex justify-content-between align-items-center p-datatable-header"><span data-v-91ac6b5c="" class="badge badge-primary badge-pill">0</span>
         €amp;nbsp;0,00
      </li>
      <div data-v-91ac6b5c="" class="p-scrollpanel p-component custom" style="width: 100%; height: 200px;">
         <div class="p-scrollpanel-wrapper">
            <div class="p-scrollpanel-content"></div>
         </div>
         <div class="p-scrollpanel-bar p-scrollpanel-bar-x p-scrollpanel-hidden"></div>
         <div class="p-scrollpanel-bar p-scrollpanel-bar-y p-scrollpanel-hidden"></div>
      </div>
      <div data-v-91ac6b5c="" class="checkout"><a data-v-91ac6b5c="" href="/cart" class=""><button data-v-91ac6b5c="" type="button" class="p-button-raised float-right m-2 p-button p-component">Checkout</button></a></div>
   </div>
   <button aria-label="close" type="button" class="p-overlaypanel-close p-link"><span class="p-overlaypanel-close-icon pi pi-times"></span></button>
</div>

CSS:

 element.style {
    transform-origin: center top;
    top: 42px;
    left: 0px;
    --overlayArrowLeft: 423.516px;
    z-index: 1004;
}
@media (max-width: 768px)
.p-overlaypanel {
    margin: 5px !important;
    width: 100% !important;
}
.p-overlaypanel {
    width: 550px;
}
.p-overlaypanel {
    position: absolute;
    margin-top: 10px;
}
.p-component, .p-component * {
    box-sizing: border-box;
}
.p-overlaypanel {
    background: #ffffff;
    color: #495057;
    border: 0 none;
    border-radius: 3px;
    box-shadow: 0px 11px 15px -7px rgb(0 0 0 / 20%), 0px 24px 38px 3px rgb(0 0 0 / 14%), 0px 9px 46px 8px rgb(0 0 0 / 12%);
}
.p-component {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-size: 1rem;
    font-weight: normal;
}
.p-component, .p-component * {
    box-sizing: border-box;
}
.p-overlaypanel {
    background: #ffffff;
    color: #495057;
    border: 0 none;
    border-radius: 3px;
    box-shadow: 0px 11px 15px -7px rgb(0 0 0 / 20%), 0px 24px 38px 3px rgb(0 0 0 / 14%), 0px 9px 46px 8px rgb(0 0 0 / 12%);
}
.p-component {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-size: 1rem;
    font-weight: normal;
}
<style>
* {
    box-sizing: border-box;
}
*, *::before, *::after {
    box-sizing: border-box;
}
* {
    box-sizing: border-box;
}
user agent stylesheet
div {
    display: block;
}
body {
    margin: 0;
    font-family: "Nunito", sans-serif;
    font-size: 0.9rem;
    font-weight: 400;
    line-height: 1.6;
    color: #212529;
    text-align: left;
    background-color: #f8fafc;
}
:root {
    --blue-50: #f4fafe;
    --blue-100: #cae6fc;
    --blue-200: #a0d2fa;
    --blue-300: #75bef8;
    --blue-400: #4baaf5;
    --blue-500: #2196f3;
    --blue-600: #1c80cf;
    --blue-700: #1769aa;
    --blue-800: #125386;
    --blue-900: #0d3c61;
    --green-50: #f6fbf6;
    --green-100: #d4ecd5;
    --green-200: #b2ddb4;
    --green-300: #90cd93;
    --green-400: #6ebe71;
    --green-500: #4caf50;
    --green-600: #419544;
    --green-700: #357b38;
    --green-800: #2a602c;
    --green-900: #1e4620;
    --yellow-50: #fffcf5;
    --yellow-100: #fef0cd;
    --yellow-200: #fde4a5;
    --yellow-300: #fdd87d;
    --yellow-400: #fccc55;
    --yellow-500: #fbc02d;
    --yellow-600: #d5a326;
    --yellow-700: #b08620;
    --yellow-800: #8a6a19;
    --yellow-900: #644d12;
    --cyan-50: #f2fcfd;
    --cyan-100: #c2eff5;
    --cyan-200: #91e2ed;
    --cyan-300: #61d5e4;
    --cyan-400: #30c9dc;
    --cyan-500: #00bcd4;
    --cyan-600: #00a0b4;
    --cyan-700: #008494;
    --cyan-800: #006775;
    --cyan-900: #004b55;
    --pink-50: #fef4f7;
    --pink-100: #fac9da;
    --pink-200: #f69ebc;
    --pink-300: #f1749e;
    --pink-400: #ed4981;
    --pink-500: #e91e63;
    --pink-600: #c61a54;
    --pink-700: #a31545;
    --pink-800: #801136;
    --pink-900: #5d0c28;
Show All Properties (50 more)
}
:root {
    --surface-a: #ffffff;
    --surface-b: #f8f9fa;
    --surface-c: #e9ecef;
    --surface-d: #dee2e6;
    --surface-e: #ffffff;
    --surface-f: #ffffff;
    --text-color: #495057;
    --text-color-secondary: #6c757d;
    --primary-color: #2196F3;
    --primary-color-text: #ffffff;
    --font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
    --surface-0: #ffffff;
    --surface-50: #FAFAFA;
    --surface-100: #F5F5F5;
    --surface-200: #EEEEEE;
    --surface-300: #E0E0E0;
    --surface-400: #BDBDBD;
    --surface-500: #9E9E9E;
    --surface-600: #757575;
    --surface-700: #616161;
    --surface-800: #424242;
    --surface-900: #212121;
    --content-padding: 1rem;
    --inline-spacing: 0.5rem;
}
:root {
    --blue: #3490dc;
    --indigo: #6574cd;
    --purple: #9561e2;
    --pink: #f66d9b;
    --red: #e3342f;
    --orange: #f6993f;
    --yellow: #ffed4a;
    --green: #38c172;
    --teal: #4dc0b5;
    --cyan: #6cb2eb;
    --white: #fff;
    --gray: #6c757d;
    --gray-dark: #343a40;
    --primary: #3490dc;
    --secondary: #6c757d;
    --success: #38c172;
    --info: #6cb2eb;
    --warning: #ffed4a;
    --danger: #e3342f;
    --light: #f8f9fa;
    --dark: #343a40;
    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --font-family-sans-serif: "Nunito", sans-serif;
    --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
:root {
    --blue-50: #f4fafe;
    --blue-100: #cae6fc;
    --blue-200: #a0d2fa;
    --blue-300: #75bef8;
    --blue-400: #4baaf5;
    --blue-500: #2196f3;
    --blue-600: #1c80cf;
    --blue-700: #1769aa;
    --blue-800: #125386;
    --blue-900: #0d3c61;
    --green-50: #f6fbf6;
    --green-100: #d4ecd5;
    --green-200: #b2ddb4;
    --green-300: #90cd93;
    --green-400: #6ebe71;
    --green-500: #4caf50;
    --green-600: #419544;
    --green-700: #357b38;
    --green-800: #2a602c;
    --green-900: #1e4620;
    --yellow-50: #fffcf5;
    --yellow-100: #fef0cd;
    --yellow-200: #fde4a5;
    --yellow-300: #fdd87d;
    --yellow-400: #fccc55;
    --yellow-500: #fbc02d;
    --yellow-600: #d5a326;
    --yellow-700: #b08620;
    --yellow-800: #8a6a19;
    --yellow-900: #644d12;
    --cyan-50: #f2fcfd;
    --cyan-100: #c2eff5;
    --cyan-200: #91e2ed;
    --cyan-300: #61d5e4;
    --cyan-400: #30c9dc;
    --cyan-500: #00bcd4;
    --cyan-600: #00a0b4;
    --cyan-700: #008494;
    --cyan-800: #006775;
    --cyan-900: #004b55;
    --pink-50: #fef4f7;
    --pink-100: #fac9da;
    --pink-200: #f69ebc;
    --pink-300: #f1749e;
    --pink-400: #ed4981;
    --pink-500: #e91e63;
    --pink-600: #c61a54;
    --pink-700: #a31545;
    --pink-800: #801136;
    --pink-900: #5d0c28;
Show All Properties (50 more)
}
:root {
    --surface-a: #ffffff;
    --surface-b: #f8f9fa;
    --surface-c: #e9ecef;
    --surface-d: #dee2e6;
    --surface-e: #ffffff;
    --surface-f: #ffffff;
    --text-color: #495057;
    --text-color-secondary: #6c757d;
    --primary-color: #2196F3;
    --primary-color-text: #ffffff;
    --font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
    --surface-0: #ffffff;
    --surface-50: #FAFAFA;
    --surface-100: #F5F5F5;
    --surface-200: #EEEEEE;
    --surface-300: #E0E0E0;
    --surface-400: #BDBDBD;
    --surface-500: #9E9E9E;
    --surface-600: #757575;
    --surface-700: #616161;
    --surface-800: #424242;
    --surface-900: #212121;
    --content-padding: 1rem;
    --inline-spacing: 0.5rem;
}
html {
    font-family: sans-serif;
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.p-overlaypanel[data-v-91ac6b5c]:before {
    border-bottom-color: #f8f9fa;
}
.p-overlaypanel:before {
    border-width: 10px;
    margin-left: -10px;
}
.p-overlaypanel:after, .p-overlaypanel:before {
    bottom: 100%;
    left: calc(var(--overlayArrowLeft, 0)   1.25rem);
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}
.p-overlaypanel:before {
    border: solid transparent;
    border-color: rgba(255, 255, 255, 0);
    border-bottom-color: #ffffff;
}
.p-overlaypanel:before {
    border: solid transparent;
    border-color: rgba(255, 255, 255, 0);
    border-bottom-color: #ffffff;
}
*, *::before, *::after {
    box-sizing: border-box;
}
.p-overlaypanel:after {
    display: none;
}
.p-overlaypanel:after {
    border-width: 8px;
    margin-left: -8px;
}
.p-overlaypanel:after, .p-overlaypanel:before {
    bottom: 100%;
    left: calc(var(--overlayArrowLeft, 0)   1.25rem);
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}
.p-overlaypanel:after {
    border: solid transparent;
    border-color: rgba(255, 255, 255, 0);
    border-bottom-color: #ffffff;
}
.p-overlaypanel:after {
    border: solid transparent;
    border-color: rgba(255, 255, 255, 0);
    border-bottom-color: #ffffff;
}
*, *::before, *::after {
    box-sizing: border-box;
}

Надеюсь, есть простое решение этой проблемы. Заранее спасибо.

Комментарии:

1. Ваш код трудно прочитать, вероятно, ваш Div превышает ширину экрана, потому что он расположен абсолютно..

2. Да, извините за плохую читабельность из-за компиляции. Я постараюсь разобраться в этом сам.

Ответ №1:

Я использовал расчет, чтобы получить правильную ширину, потому что я использую запас.

Окончательное решение:

 width: calc(100% - 10px);
Метки: ,