Jump to content
  • 0

Блок по центру экрана

Неугомонный

Asked by Неугомонный,

 Share

Question

Неугомонный Explorer

Неугомонный

Posted
Posted (edited)

Как растянуть блок по размеру экрана а не так чтобы он улетал за экран?

  

// CSS 
.dropdown 
{
	display: inline-block;
  
}
    .dropdown-content 
{
    z-index: 1;
    display:none;
	position: absolute;
	background-color: #000;
	width: 100%;
	padding: 46px 24px 40px;
	max-width:1358px;;
}

.dropdown:hover .__open 
{
	background-color: #000;
	color: #4a4a4a;
}

.dropdown:hover .dropdown-content 
{
	display:block;
}

// HTML
<div class="dropdown">
  <a class="__open" href="#">Ссылка 4</a>
  <div class="dropdown-content"></div>
</div>

 

 

image.png

Edited by Неугомонный
Link to comment
Share on other sites

17 answers to this question

Recommended Posts

  • 0
Switch74 Rising Star

Switch74

Posted
Posted

эта проблема будет возникать на любом экране меньшего размера.
чтобы избавиться от горизонтальной полосы прокрутки можно выставлять width:100% для всех экранов меньше требующегося.
 у вас фигурирует width:1358px скорее всего проблема в этом

 

Link to comment
Share on other sites
  • 0
Неугомонный Explorer

Неугомонный

Posted
  • Author
Posted (edited)
  On 7/29/2019 at 3:40 PM, AlexZaw said: 
body{
  margin: 0;
}
.dropdown-content {
  z-index: 1;
  display:none;
  position: absolute;
  background-color: #000;
  width: calc(100% - 48px);
  padding: 46px 24px 40px;
}

 

Expand  

image.thumb.png.44c0e305ee526b87ddc010f8dcf7937b.png

над на весь 100%

Edited by Неугомонный
Link to comment
Share on other sites
  • 0
AlexZaw Explorer

AlexZaw

Posted
Posted
  On 7/29/2019 at 3:54 PM, Неугомонный said:

Все что есть в первом посте

Expand  

на последнем скрине у вас 6 ссылок, причем они находятся не с края экрана. В первом посте ссылка одна и одна у левого края экрана, отсюда делаем вывод что код не весь.

С кодом из первого поста мой приведенный код работает нормально, даже если добавить еще несколько ссылок.

В случае если вы ссылки добавляете не внутрь .dropdown, а добавляете сами блоки .dropdown вместе со ссылками внутри, то для .dropdown-content нужно добавить left: 0;

Link to comment
Share on other sites
  • 0
Неугомонный Explorer

Неугомонный

Posted
  • Author
Posted (edited)
  On 7/29/2019 at 4:00 PM, AlexZaw said:

на последнем скрине у вас 6 ссылок, причем они находятся не с края экрана. В первом посте ссылка одна и одна у левого края экрана, отсюда делаем вывод что код не весь.

С кодом из первого поста мой приведенный код работает нормально, даже если добавить еще несколько ссылок

Expand   
<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<meta name="description" content="">
		<meta name="keywords" content="">
		
		<link rel="icon" href="favicon.ico">
		<style>
		body{min-height:1500px;overflow-y:hidden;}
@media only screen and (min-width: 1280px) {
      .dropdown 
{
	display: inline-block;
  
}
    .dropdown-content 
{
    z-index: 1;
    display:none;
	position: absolute;
	background-color: #000;
	width: calc(100% - 48px);height:368px;
	padding: 46px 24px 40px;
	max-width:1358px;
	left:50%;
}

.dropdown:hover .__open 
{
	background-color: #000;
	color: #4a4a4a;
}

.dropdown:hover .dropdown-content 
{
	display:block;
}
}


		</style>
		<script src="js/jquery-2.2.4.min.js"></script>
	</head>
	<body>

	<div id="">
		<div class="">
			<a class="" href="#index.html"></a>
			<div class=" ">
				<div style="width:1024px;margin:0 auto;">
					<a class="" href="#">Ссылка 1</a>
					<a class="" href="#">Ссылка 2</a>
					<a class="" href="#">Ссылка 3</a>
					<div class="dropdown">
						<a class="__open" href="#">Ссылка 4</a>
						<div class="dropdown-content">
						</div>
					</div>
					<a class="" href="#">Ссылка 5</a>
					<a class="" href="#">Ссылка 6</a>
				</div>
				<div class="">
					<a class="" href="#"></a>
					<a class="" href="#"></a>
					<a class="" href="#"></a>
					<a class="" href="#"></a>
				</div>
			</div>
		</div>
	</div>

	
</body>

  

<div style="width:1024px;margin:0 auto;">

Вот что там было 

Edited by Неугомонный
Link to comment
Share on other sites
  • 0
Неугомонный Explorer

Неугомонный

Posted
  • Author
Posted (edited)
  On 7/29/2019 at 4:12 PM, AlexZaw said: 
  .dropdown-content {
    z-index: 1;
    display:none;
    position: absolute;
    background-color: #000;
    width: calc(100% - 48px);
    height:368px;
    padding: 46px 24px 40px;
    left: 0;
  }

 

Expand  

сложность в том что должен быть и с left:0; окно не по центру а слева приклеено 

max-width:1358px;
Edited by Неугомонный
Link to comment
Share on other sites
  • 0
AlexZaw Explorer

AlexZaw

Posted
Posted
  On 7/29/2019 at 4:17 PM, Неугомонный said:

сложность в том что должен быть и с left:0; окно не по центру а слева приклеено

Expand  

Так .dropdown-content должен быть с max-width:1358px; и по центру или на всю ширину окна?

Link to comment
Share on other sites
  • 0
Неугомонный Explorer

Неугомонный

Posted
  • Author
Posted (edited)
  On 7/29/2019 at 4:28 PM, AlexZaw said:

Так .dropdown-content должен быть с max-width:1358px; и по центру или на всю ширину окна?

Expand  

Если ширина экрана меньше 1358 то на всю, если ширина экрана больше 1358 (например 1680) то по центру экрана и не превышая размер max-width:1358px

Edited by Неугомонный
Link to comment
Share on other sites
  • 0
AlexZaw Explorer

AlexZaw

Posted
Posted
  On 7/29/2019 at 4:42 PM, Неугомонный said:

Если ширина окна меньше 1358 то на всю, если ширина окна dropdown-content больше  1358 то по центру экрана

Expand  

Так? 

body {
  min-height: 1500px;
  overflow-y: hidden;
}

.dropdown {
  display: inline-block;
}

.dropdown-content {
  z-index: 1;
  display: none;
  position: absolute;
  background-color: #000;
  width: 100%;
  left: 0;
  height: 368px;
  box-sizing: border-box;
  padding: 46px 24px 40px;
}

.dropdown:hover .__open {
  background-color: #000;
  color: #4a4a4a;
}

.dropdown:hover .dropdown-content {
  display: block;
}

@media only screen and (min-width: 1358px) {
  .dropdown {
    display: inline-block;
  }

  .dropdown-content {
    max-width: 1358px;
    left: calc((100% - 1358px)/2);
  }
}

 

Link to comment
Share on other sites
  • 0
Неугомонный Explorer

Неугомонный

Posted
  • Author
Posted
  On 7/29/2019 at 5:16 PM, AlexZaw said:

Так? 

body {
  min-height: 1500px;
  overflow-y: hidden;
}

.dropdown {
  display: inline-block;
}

.dropdown-content {
  z-index: 1;
  display: none;
  position: absolute;
  background-color: #000;
  width: 100%;
  left: 0;
  height: 368px;
  box-sizing: border-box;
  padding: 46px 24px 40px;
}

.dropdown:hover .__open {
  background-color: #000;
  color: #4a4a4a;
}

.dropdown:hover .dropdown-content {
  display: block;
}

@media only screen and (min-width: 1358px) {
  .dropdown {
    display: inline-block;
  }

  .dropdown-content {
    max-width: 1358px;
    left: calc((100% - 1358px)/2);
  }
}

 

Expand  

фишка в том что это все обернуто должно быть в  

@media only screen and (min-width: 1024px
Link to comment
Share on other sites
  • 0
AlexZaw Explorer

AlexZaw

Posted
Posted
  On 7/29/2019 at 7:04 PM, Неугомонный said:

фишка в том что это все обернуто должно быть в  

@media only screen and (min-width: 1024px
Expand  

Это все замечательно, разместить все это в запросе не проблема. Проблема в том, что на меньших экранах у блока тоже должны быть какие-то свойства и их придется размещать или вне медиа запроса, или в другом запросе, но с меньшей шириной. 

Link to comment
Share on other sites
  • 0
Неугомонный Explorer

Неугомонный

Posted
  • Author
Posted (edited)
  On 7/29/2019 at 7:22 PM, AlexZaw said:

Это все замечательно, разместить все это в запросе не проблема. Проблема в том, что на меньших экранах у блока тоже должны быть какие-то свойства и их придется размещать или вне медиа запроса, или в другом запросе, но с меньшей шириной. 

Expand  

на меньше все в другом виде не будет вылетающего блока вообще при ховере ))

Edited by Неугомонный
Link to comment
Share on other sites
  • 0
AlexZaw Explorer

AlexZaw

Posted
Posted

Что-то я уже совсем ничего не понимаю.

  On 7/29/2019 at 4:42 PM, Неугомонный said:

Если ширина экрана меньше 1358 то на всю, если ширина экрана больше 1358 (например 1680) то по центру экрана и не превышая размер max-width:1358px

Expand  

в вышеприведенном коде условие выполняется? Выполняется. При чем тут запрос на 1024px? При такой ширине экрана блок должен быть растянут на 100% что и происходит. Что не так?

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept