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)
4 минуты назад, AlexZaw сказал: 

body{
  margin: 0;
}
.dropdown-content {
  z-index: 1;
  display:none;
  position: absolute;
  background-color: #000;
  width: calc(100% - 48px);
  padding: 46px 24px 40px;
}

 

image.thumb.png.44c0e305ee526b87ddc010f8dcf7937b.png

над на весь 100%

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

AlexZaw

Posted
Posted
8 минут назад, Неугомонный сказал:

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

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

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

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

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

Неугомонный

Posted
  • Author
Posted (edited)
10 минут назад, AlexZaw сказал:

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

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

<!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)
6 минут назад, AlexZaw сказал: 

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

 

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

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

AlexZaw

Posted
Posted
11 минут назад, Неугомонный сказал:

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

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

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

Неугомонный

Posted
  • Author
Posted (edited)
20 минут назад, AlexZaw сказал:

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

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

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

AlexZaw

Posted
Posted
5 минут назад, Неугомонный сказал:

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

Так? 

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
1 час назад, AlexZaw сказал:

Так? 


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);
  }
}

 

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

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

AlexZaw

Posted
Posted
5 минут назад, Неугомонный сказал:

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


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

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

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

Неугомонный

Posted
  • Author
Posted (edited)
4 минуты назад, AlexZaw сказал:

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

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

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

AlexZaw

Posted
Posted

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

2 часа назад, Неугомонный сказал:

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

в вышеприведенном коде условие выполняется? Выполняется. При чем тут запрос на 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