How to hide sidebar and vertical bar with CSS

Asked

Viewed 33,940 times

5

I would like to hide these two bars (Vertical and Horizontal), I have configured my . css file with the settings below, but they are not working:

@charset "UTF-8";

section#conteudo{
  width: 1000px;
  margin:  auto;
}

iframe#frameEspecificacoes{
  width: 400px;
  height: 280px;
  border: none;
  overflow: hidden;
}

iframe#frameEspecificacoes::-webkit-scrollbar { 
  display: none;
}

inserir a descrição da imagem aqui

html5 css3

  • You tried to use overflow: hidden;?

  • That’s what I’m using in iframe#frameEspecifics. And it doesn’t work.

  • The element containing the iframe must have the overflow:hidden too

  • It didn’t work, I just added...

  • Check which element is with the scrollbars, because it is certainly not the iframe, as Section has width 1000px checks if the Section Parent element is not the one that is bursting.

  • It didn’t work for me in this exercise either, maybe it’s not the best way, but I was only able to hide the scroll bar using the parameter/attribute (scrolling="None") inside the iframe tag. Ex.: <iframe src="google-Glass.html" scrolling="no" name="window" id="frame-spec"></iframe>

  • I could also only add scrolling="no" to the <iframe ...tag, thus: <iframe src="google-Glass.html" name="window" id="frame-spec" scrolling="no"></iframe>

Show 2 more comments

2 answers

5

It is necessary to verify which element is bursting, that is, having its width/height exceeded by the content size, and apply overflow: hidden; to that element:

body {
	overflow: hidden;
}

section#conteudo{
	width: 1000px;
	margin: auto;
	overflow: hidden;
}

iframe#frameEspecificacoes{
  background: #AAA;
	width: 400px;
	height: 280px;
	border: none;
	overflow: hidden;
}

iframe#frameEspecificacoes::-webkit-scrollbar { 
	display: none;
}
<section id="conteudo">

<iframe id="frameEspecificacoes"></iframe>

</section>

  • It is not bursting, I believe, because the width is 900px, of the remaining content of the page, looking better what seems to me is the non-recognition of :-Webkit-scrollbar, which the code turns white, as if it were not being recognized. Will be?

3

Good evening guys, I took this course and went through the same problem, I already gave an answer here in the forum to include <iframe scrolling="no"> on the page specs.html.

Today I came to give the answer even better, the "semantically correct" solution which is to insinuate 

body {
overflow-x: hidden;
overflow-y: hidden;
}

in the page css google-Glass.html.

Browser other questions tagged html5 css3

You are not signed in. Login or sign up in order to post.