Удалить полосу прокрутки с переполнением скрыты - PullRequest
Новая
       0

Удалить полосу прокрутки с переполнением скрыты

1 голос
/ 14 апреля 2020

Я пытаюсь скрыть полосу прокрутки на переполненном элементе.
Я пытался использовать overflow: hidden;, но это не работает.

Вот мой минимальный пример: 

#navbar {
  width: 10000px;
  border: solid red 1px;
  overflow-x: hidden;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
</head>

<body>
  <div id="container">
    <div id="navbar">hello</div>
  </div>
</body>

</html>

Ответы [ 4 ]

1 голос
/ 14 апреля 2020

Да, вы можете иметь более 100%, вы можете установить контейнер на 100% и иметь внутренний элемент на сколько вам нужно. 

#container {
  width: 100%;
  overflow: hidden;
}

#navbar {
  /* your requirement */
  max-width: 10000px;
  border: solid red 1px;
  white-space: nowrap;
  width: auto;
}
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
</head>

<body>
  <div id="container">
    <div id="navbar">Flex items have a default order value of 0, therefore items with an integer value greater than 0 will be displayed after any items that have not been given an explicit order value. You can also use negative values with order, which can be quite useful.
      If you want to make one item display first, and leave the order of all other items unchanged, you can give that item an order of -1. As this is lower than 0 the item will always be displayed first. In the live code example below I have items laid
      out using Flexbox. By changing which item has the class active assigned to it in the HTML, you can change which item displays first and therefore becomes full width at the top of the layout, with the other items displaying below it. Flex items have
      a default order value of 0, therefore items with an integer value greater than 0 will be displayed after any items that have not been given an explicit order value. You can also use negative values with order, which can be quite useful. If you want
      to make one item display first, and leave the order of all other items unchanged, you can give that item an order of -1. As this is lower than 0 the item will always be displayed first. In the live code example below I have items laid out using
      Flexbox. By changing which item has the class active assigned to it in the HTML, you can change which item displays first and therefore becomes full width at the top of the layout, with the other items displaying below it. Flex items have a default
      order value of 0, therefore items with an integer value greater than 0 will be displayed after any items that have not been given an explicit order value. You can also use negative values with order, which can be quite useful. If you want to make
      one item display first, and leave the order of all other items unchanged, you can give that item an order of -1. As this is lower than 0 the item will always be displayed first. In the live code example below I have items laid out using Flexbox.
      By changing which item has the class active assigned to it in the HTML, you can change which item displays first and therefore becomes full width at the top of the layout, with the other items displaying below it. Flex items have a default order
      value of 0, therefore items with an integer value greater than 0 will be displayed after any items that have not been given an explicit order value. You can also use negative values with order, which can be quite useful. If you want to make one
      item display first, and leave the order of all other items unchanged, you can give that item an order of -1. As this is lower than 0 the item will always be displayed first. In the live code example below I have items laid out using Flexbox. By
      changing which item has the class active assigned to it in the HTML, you can change which item displays first and therefore becomes full width at the top of the layout, with the other items displaying below it. Flex items have a default order value
      of 0, therefore items with an integer value greater than 0 will be displayed after any items that have not been given an explicit order value. You can also use negative values with order, which can be quite useful. If you want to make one item display
      first, and leave the order of all other items unchanged, you can give that item an order of -1. As this is lower than 0 the item will always be displayed first. In the live code example below I have items laid out using Flexbox. By changing which
      item has the class active assigned to it in the HTML, you can change which item displays first and therefore becomes full width at the top of the layout, with the other items displaying below it. Flex items have a default order value of 0, therefore
      items with an integer value greater than 0 will be displayed after any items that have not been given an explicit order value. You can also use negative values with order, which can be quite useful. If you want to make one item display first, and
      leave the order of all other items unchanged, you can give that item an order of -1. As this is lower than 0 the item will always be displayed first. In the live code example below I have items laid out using Flexbox. By changing which item has
      the class active assigned to it in the HTML, you can change which item displays first and therefore becomes full width at the top of the layout, with the other items displaying below it. Flex items have a default order value of 0, therefore items
      with an integer value greater than 0 will be displayed after any items that have not been given an explicit order value. You can also use negative values with order, which can be quite useful. If you want to make one item display first, and leave
      the order of all other items unchanged, you can give that item an order of -1. As this is lower than 0 the item will always be displayed first. In the live code example below I have items laid out using Flexbox. By changing which item has the class
      active assigned to it in the HTML, you can change which item displays first and therefore becomes full width at the top of the layout, with the other items displaying below it. Flex items have a default order value of 0, therefore items with an
      integer value greater than 0 will be displayed after any items that have not been given an explicit order value. You can also use negative values with order, which can be quite useful. If you want to make one item display first, and leave the order
      of all other items unchanged, you can give that item an order of -1. As this is lower than 0 the item will always be displayed first. In the live code example below I have items laid out using Flexbox. By changing which item has the class active
      assigned to it in the HTML, you can change which item displays first and therefore becomes full width at the top of the layout, with the other items displaying below it. Flex items have a default order value of 0, therefore items with an integer
      value greater than 0 will be displayed after any items that have not been given an explicit order value. You can also use negative values with order, which can be quite useful. If you want to make one item display first, and leave the order of all
      other items unchanged, you can give that item an order of -1. As this is lower than 0 the item will always be displayed first. In the live code example below I have items laid out using Flexbox. By changing which item has the class active assigned
      to it in the HTML, you can change which item displays first and therefore becomes full width at the top of the layout, with the other items displaying below it.</div>
  </div>
</body>

</html>
0 голосов
/ 14 апреля 2020

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

#container {
  overflow-x:hidden;
}

#navbar {
  width: 10000px;
  border: solid red 1px;
  white-space: nowrap;
}
<!DOCTYPE html>
<div id="container">
  <div id="navbar">hello afjalksjflkasfd ajskfjasflaksfdjaslfdkajs flaksdfjaslkfdja sjfdkasdf aslfdkjas dlfkasdfja lskfdajsdflasd flaksdf asldkf asfdlkasdf alskfdjasldkfa sflasfdja lsdfasldfjasldkfa sflkas fd</div>
</div>

Если вы хотите задать переполнение для панели навигации, попробуйте следующий код. Вам нужно добавить еще один div внутри панели навигации. 

#navbar {
  overflow-x: hidden;
}

#navbar>div {
  width: 10000px;
  border: solid red 1px;
  white-space: nowrap;
}
<!DOCTYPE html>
<div id="container">
  <div id="navbar">
    <div>hello afjalksjflkasfd ajskfjasflaksfdjaslfdkajs flaksdfjaslkfdja sjfdkasdf aslfdkjas dlfkasdfja lskfdajsdflasd flaksdf asldkf asfdlkasdf alskfdjasldkfa sflasfdja lsdfasldfjasldkfa sflkas fd</div>
  </div>
</div>
0 голосов
/ 14 апреля 2020

overflow-x: hidden; должен быть в селекторе body, а не в #navbar.

Вот ваш код: 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        overflow-x: hidden;
      }
      
      #navbar {
        width: 10000px;
        border: solid red 1px;
      }
    </style>
  </head>
  <body>
    <div id="container">
      <div id="navbar">hello</div>
    </div>
  </body>
</html>

И, как всегда, живая демоверсия здесь: https://codepen.io/marchmello/pen/mdeeMPB?editors=1000

Также вы можете поставить overflow-x: hidden; в #container селектор.

Вот ваш код: 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #container {
        overflow-x: hidden;
      }
      
      #navbar {
        width: 10000px;
        border: solid red 1px;
      }
    </style>
  </head>
  <body>
    <div id="container">
      <div id="navbar">hello</div>
    </div>
  </body>
</html>
0 голосов
/ 14 апреля 2020

Вы можете установить width=100% следующим образом: 

#navbar {
        width: 100%;
        border: solid red 1px;
        overflow-x: hidden;
}
<div id="container">
      <div id="navbar">hello</div>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...